A Practical Guide to Redux

What is Redux?
Redux is a state management library that lets you connect directly to application state from anywhere in your app. It also allows you manipulate application state from anywhere in your app. But, to work its magic, Redux requires that your app have a single data store.

This post focuses on using Redux in a React app.

This post has three parts:

Boilerplate
Elements of Redux (the bulk of this post)
Sample app (an adorable, err, I mean super-tough Most Wanted list app)
Clone the repo.

Check out the Demo.

If you want type out the code yourself, you can get started by initializing a new project with:create-react-app <project-name>

When create-react-app is done setting up, cd into the folder and:npm install –save redux react-redux axios.Axios has nothing to do with Redux, but it’s the library used for AJAX calls in the demo app.

(If you don’t have create-react-app installed, first run npm install -g create-react-app.)

What problem does Redux solve?
In a React app, data is fetched in an parent component and then passed down to child components through props.

Things get complicated when there are many layers of components and data/state (and the functions that modify this state) are passed through numerous components to get from origin to destination. This path can be difficult to remember and it leaves many places for errors to be introduced.

With Redux, any component can be connected directly to state.
This isn’t to say that data is no longer passed down from parent components to child components via props. Rather, this path can now be direct, no passing props down from parent to great-great-great-great-great-great-grandchild.

It’s not good practice to have all components connect to application state. It is best to have parent/container components connect to state and pass state directly to children.

Terminology: Components connected to state are usually called ‘container’ or ‘smart’ components, and they usually execute logic too. Components that do not have state of their own, and receive state from container components care called ‘dumb’ components. Sometimes these dumb components are functional components. Both container components and functional components are implemented in the demo app. (NewUserFace.js and Toast.js are functional components.)

Technically an action creator only needs to fire off Redux’s dispatch function along with an object. That’s not quite what’s going on here. In the code above, the main function (addPerson) dispatches another function (addPersonAync). This second function is called a thunk, and it returns the object/action.

Terminology: In the context of redux-thunk, a thunk is a second function that performs delayed logic by being asynchronously returned by a first function.

What’s up with that? That’s the Thunk middleware at work. This double function strategy allows us to wait for an asynchronous operation (like fetching data) to complete, and then the action is returned by the thunk.

The adjusted order, including reducers, is: dispatch  action creator  thunk  action  reducer.

In this case the double function strategy isn’t necessary, but it’s a general pattern to follow so if an operation is asynchronous, you’re already set up to deal with it.

Here’s a case in which an async operation is actually taking place. Below is the code for fetching the data for the demo app’s Most Wanted List.