React Express

2.1ES2015...
2.3JSX
6.2Redux...
6.3GraphQL...
React Redux
React Redux
Redux has official bindings for React in a package called React Redux.
In the previous examples, we passed the store object directly into our container component as a prop. We then started listening to changes in componentWillMount with store.subscribe(), and we made sure to unsubscribe in componentWillUnmount. We dispatched actions with store.dispatch(action).
There are a few issues with using Redux this way:
  • Subscribing and unsubscribing to the store in our components is tedious and error-prone.
  • Every container component will re-render on every change to the store, potentially becoming a performance issue.
  • Using the store directly exposes the entire store API to our components; generally, components only need to be aware of the dispatch() API.
React Redux addresses these issues.
React Redux API
Provider
React Redux exposes the Provider component to handle passing our store to every container component. We'll generally use this to wrap the root component of our app, e.g. <Provider store={store}> ... </Provider>.
connect(mapStateToProps)(Component) => Component
We use connect() to access the state of our store in our container components. Call connect(mapStateToProps) with a function that takes the state of the store, mapping it to props to be passed into our container component, (state) => props. Calling connect() returns another function, which we should then call with our container component, connect(...)(Component), to get a "connected" component. This connected component will automatically have a dispatch prop (for dispatching actions), and the result of mapStateToProps will be merged into the component's props.
That's enough to get started!
There are more APIs, and more parameters to the connect() function, but these are the ones you need to get going. Feel free to read more about React Redux in the docs.
To-Do List Example
Let's take a look at our To-Do List app again, now that it's using React Redux.
Files
  • index.js
    This file handles creating the redux store and passing it to our Provider. The Provider will let us connect our App container to the store with connect().
  • todoListRedux.js
    The same as in the Redux example.
  • App.js
    App is connected to the store using connect(). It pulls the list data, todos, out of the store's state using mapStateToProps. It uses the dispatch() function added to its props to dispatch actions to modify the store.
  • List.js, Input.js, Title.js
    Presentational components - these are the same as in the Component State example.