How to Implement Redux in A React Application

Unless you are specifically interested in mapStateToProps and mapDispatchToProps, please check out the updated version of this blog, Redux with Hooks: Basic Setup, that incorporates useSelector and useDispatch.

There are many great tutorials that break down the concepts behind Redux or give a nice overview of how everything’s connected, but the fact is, Redux has a lot of starter code that is difficult to set up for the first time. If you understand the basics of Redux, here are some easy steps for initial setup in your React app.

Note: One of the most confusing things about Redux is that you can set up your files in many different ways. Here is one option that uses combineReducers.

Step 1: In your React app, run npm install redux && npm install react-redux .

Step 2: In index.js, import {Provider} from 'react-redux'. Then, add <Provider> tags around your <App> component.

Step 3: Create a redux folder in src, and three files: actions.js, reducer.js and store.js.

Step 4: In reducer.js, import { combineReducers } from 'redux' and set up your combineReducers.

Step 5: In store.js, import { createStore } from 'redux' and import rootReducer from './reducer'. Use createStore to… wait for it… create your store and include middleware in order to use Chrome Redux Developer Tools.

Step 6: In index.js, import store from './redux/store' and add the store to your <Provider> component.

At this point, all of your files are set up. We will still need to add actions/reducers and connect them to our components with connect(), but the setup is complete. For the rest of this blog, I will walk you through mapStateToProps and mapDispatchToProps using a sample application.

Our sample application has 3 components nested in a src > components folder. Here’s the full code if you’d like to pull it down and test it yourself.

PostCard.jsx

PostsContainer.jsx — PostCard isn’t being used quite yet, but we’ll add it in soon.

NewPostForm.jsx — Notice that the class has some local state because this is the only component that needs to keep track of what is being typed prior to submission.

As the last part of setup, be sure to import PostsContainer.jsx in App.js :

Step 7: In reducer.js, create a postsReducer to handle the posts portion of the state. Since there aren’t any actions yet, let’s start with the default of return state.

Step 8: In PostsContainer.jsx, we need access to the posts stored in the store. First, import {connect} from 'react-redux'. Next, create your mapStatesToProps function and select the piece(s) of state that you want to access through props. We need to wrap PostsContainer with connect so change export default PostsContainer to export default connect(mapStateToProps)(PostsContainer). Finally, we’ll need to pass props as an argument in order to have access to posts.

At this point, if we already had posts stored in state, this would be enough to map over props.posts and create PostCard components. However, since we’re starting with no posts, we’ll need to add mapDispatchToState.

Step 9: A few things have to happen at once to get an action going. First, add a case to your reducer. Think about what kind of information you’ll need in your payload in order to add a new post (text & id).

Step 10: In actions.js, create a function that returns an action object when invoked. Don’t forget to export it!

Step 11: Back in NewPostForm.jsx, import {connect} from 'react-redux' and import { addPost } from '../redux/actions'. Create mapDispatchToProps and wrap NewPostForm using connect(). Notice that we are entering null instead of mapStateToProps since we aren’t trying to pass any state from the store to the form. In mapDispatchToProps, set the key value to addPost, which is how the form will be able to access it in props (this.props.addPost). On the other hand, addPost() is the return value of the function we imported from actions.js, which will then get passed into dispatch.

Note: We could have put mapDispatchToProps in the PostsContainer component and then passed it down as a prop to NewPostForm, but eventually, it may be nice to move the form out of PostsContainer.

Step 12: Finally, update your handleOnSubmit to use this.props.addForm(). Be sure that your object keys match the payload keys in your function in actions.js.

Note: to generate a random id check out uuid.

And there you have it! Here’s the final product… a wonderfully boring, but functioning, post board.

Of course, this is only dealing with the frontend. To connect it to the backend, you’ll need to use some asynchronous middleware, such as Thunk. My next blog post walks you through setting up Thunk.

Hot tips:

• look up how to use Thunk and maintain access to your Dev tools with {compose} and in general with React
• know that you may need to use withRouter from react-router-dom if your component is using redux and react-router.

Happy Coding!