Skip to content

Commit

Permalink
DevDocs: Distinguish App Components from Connected Components
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth committed Feb 2, 2016
1 parent d3c14ec commit 87edd36
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion docs/our-approach-to-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,9 @@ Framed this way, we can consider two types of container components: connected co

Separating visual and data concerns is a good mindset to have when approaching components, and whenever possible, we should strive to create reusable visual components which accept simple props for rendering. However, pragmatically it is unreasonable to assume that components will always be reused and that there's always a clear divide between the visual and data elements. As such, while we recommend creating purely visual components whenever possible, it is also reasonable to create components that are directly tied to the global application state. We call these "connected" components, and we use the [`react-redux` library](https://github.com/rackt/react-redux) to assist in creating bindings between React components and the store instance.

Below is an example of a connected component using [`react-redux`'s `connect`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) function. It retrieves an array of posts for a given site and passes the posts to the component for rendering. If you're unfamiliar with the stateless function syntax for declaring components, refer to the [React 0.14 upgrade guide](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) for more information.
You may come to encounter the term "App Component", which is a specific subset of connected components tailored towards reusability between sections of the application. Not all components are intended to be reused, and we recommend being liberal with your usage of [`react-redux`'s `connect`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) function, with a granularity reflective of the data requirements of the component.

Below is an example of a connected component. It retrieves an array of posts for a given site and passes the posts to the component for rendering. If you're unfamiliar with the stateless function syntax for declaring components, refer to the [React 0.14 upgrade guide](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) for more information.

```jsx
function PostsList( { posts } ) {
Expand Down

0 comments on commit 87edd36

Please sign in to comment.