Quick Start Tutorial: React Redux

4 min readMar 8, 2016

Start using React Redux without ES6 or Webpack. The React Tutorial (github), modified by adding Redux to the app (github).

React logo Stained Glass from Nick Schrock’s presentation

React is a great library for building user interfaces. I won’t enthuse about its benefits here: suffice it to say someone already made a stained-glass window with a React logo. React is lightweight enough to drop into any web app, but the downside of this flexibility is that the other layers of your app have to be separately chosen and integrated.

The Redux Learning Curve

I’ve been using React to build a web application and decided to complete my app by integrating tools commonly used in the ecosystem: Redux and React-Router.

Unfortunately, I found the Redux learning curve distressingly steep. I made a cup of tea and pulled up the code examples, expecting to spend twenty minutes getting up to speed, and ended up spending four days. (That took a lot of cups.) The documentation and example apps, while products of obvious intelligence and thoughtfulness, were too advanced for my purpose. The fact that even even simple example apps span dozens of files and use Webpack, Babel, ES6, and ES7 can throw newcomers off track.

Now that I’ve gained some understanding of Redux, I decided to make a quick example app by forking the React Quick Start Tutorial and modifying it to use Redux. My Redux-enabled code is available at React-Redux-Tutorial. You can compare the differences between the original tutorial and my fork at this link: compare changes.

Basic Setup

Keep in mind that neither the original React comment box tutorial nor my Redux-enabled version demonstrate the ideal setup for production apps. The example app only provides an introduction to basic React and Redux usage.

I started modifying the original tutorial by editing the list of included JavaScript libraries to add Redux and React Redux.

We will need the JavaScript Object.assign method, so I also added a polyfill that defines the method in the absence of browser support.

Next we assign some variables:

How Redux Works

The Gist of Redux:

The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.

The store in our app will be a JavaScript object:

Actions are objects with a type property. The two actions in this app are simple: one adds a comment, and the other sets the comments to display.

Now we need a reducer function, which returns the app state based on the previous state and the dispatched action. Some practices to follow when writing a reducer: (1) If state is undefined, return the initial state of the app. (2) To return the next state, don’t mutate the state parameter. Use Object.assign to copy the previous state and to merge changed properties into the next state. (3) If there isn’t a new next state, return the previous state by default.

More information about reducers in the Redux docs:

Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

After defining the initialState object and reducer function, we create our store:

Connecting React Components to Redux

Connecting a React component to Redux allows the component to use the top-level store without having to pass the store down as a prop through its parent components.

To start connecting components, we have to wrap our root component in Provider, a special React Redux component, and pass it the store variable.

The React Redux docs describe many ways to use connect. For our purposes, we call connect two different ways.

First, mapping state to props:

var ConnectedComponent = connect(mapStateToProps)(Component)

In our app, this will allow the CommentList component to access comments from the Redux store state.data as this.props.data:

Now even though CommentList is called without props, it has a data prop populated with the Redux store state.data:

The second way we will use connect is to both map state to props, and map dispatch functions to props.

var ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Component)

First, mapping state to props will provide the CommentBox component this.props.data, this.props.url and this.props.pollInterval from the Redux store:

Then mapping dispatch functions for the add_comment and set_comments actions to props will make this.props.addComment and this.props.setComment available as functions in CommentBox:

Connecting CommentBox with mapStateToProps and mapDispatchToProps:

Now we can call CommentBox without props, because the props we need have been provided through connect:

You can check out this React Redux Tutorial app in action on Github.

Recap

Redux at its most minimal is the store, actions, and reducers.

Connecting React to Redux involves wrapping your entire app in the Provider component, and then connecting components, using mapStateToProps and mapDispatchToProps as appropriate.

Happy Reduxing!