diff --git a/docs/our-approach-to-data.md b/docs/our-approach-to-data.md index 3cb5fb96627214..4d67fbcd7171b0 100644 --- a/docs/our-approach-to-data.md +++ b/docs/our-approach-to-data.md @@ -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 } ) {