Integrate redux into your existing react app in 5 steps

Are you developing a react application and fed up with lifting the state up creating a parent component each time you want to share data with peer components? Are you fancied on redux and how it allows you to maintain one state, a single source of truth in the redux store and lets your components communicate with the store to get data? But do you think that integrating redux to your existing application is hard? Then this article is for you. Keep reading!

Below I will describe the steps you need to carry out to make your app flow through redux. It is not as hard as you think.

To start, install redux and react-redux using this command.

npm install --save redux react-redux

If you feel that before integrating you want to know redux better and have an idea of what is happening underneath, then you can first read Understanding redux data flow and come back.

Step 1

Create action creators that return an action to send your application data to the redux store. Ideally, this will be a separate file.

Step 2

Create reducers. As actions specify only what has changed, reducers specify how the state should be changed after an action is dispatched to the store. Note that a reducer is a pure function that accepts the previous state and action and returns the new state.

(prevState, action) => newState

Note that when returning the new state, do not ever mutate the previous state. Always create a new reference for the new state creating a new object/array. React keeps track of the state reference changes and if you do not change the reference how will it know a change has happened?

As your app grows you can split reducers and combine them using redux combineReducers. Let’s just work with one reducer for this simple starting redux app.

Step 3

Now as the actions and reducers are implemented let’s create the store.

Step 4

Let’s make the store visible to your entire app. Go to the index.js and add theProvider for it.

Do you believe me if I say all the setup is done now? Yes, you did it. Now let’s make the data flow through this. Let’s connect the components to redux.

Step 5

Basically what we need to do is, if we need to read data from the store we need to subscribe to redux state(mapStateToProps) and, to perform an action to change data, we need to dispatch redux actions(mapDispatchToProps). To do this import connect module from react-redux and perform the connecting. Typically it will look like this with mapStateToProps and mapDispatchToProps function implementations.

But wait, it is simple than that with ES6 object shorthand. And the good news is if you specify mapDispatchToProps to connect using the object shorthand, connect will automatically call the bindActionCreators for you. So the actual code you need to write to connect your components to redux will look like this.

THAT’S IT! You have successfully implemented your first react-redux app. Now you can access the data for users from this.props.users and call the addUserredux action by calling this.props.addUser.

Let yourself get familiar with the flow. And if you didn’t read Understanding redux data flow article before, you can now read it to get a clear understanding of the redux data flow.

Hope this article helped you to get on with your react-redux journey. Thanks for reading!