How to setup Redux in your React Application (A Hands-on guide)

If you are familiar with React JS and have developed any application you must be knowing how much pain is it to pass data between components. While every component or container can have their States managed Even stateless components(functional components) have their states now with the introduction of Hooks. Whatever be the use case and what so ever be the scenario one thing is for sure that no components in React talk to each other unless they have a parent-child relationship or you do the hack with state lifting using props or maybe use localStorage and other old ways.

To solve the above-mentioned problems there is one powerful way with a steep learning curve. The solution is Redux.

What is Redux?

Redux is an open-source javascript library that is used to effectively manage the state of an application. It is employed to create a consistent state for the whole application. With this being used every single component gets access to a single container which makes your app implement a single source of truth making your components controllable. Below is a basic flow chart that explains the working of redux.

Flowchart for redux

Getting Started with Redux

• Step 1 (Installing packages): To start using redux with react you have to install two packages redux and react-redux. You can run the following command in your shell.

npm install --save react-redux redux

• Step 2 (Writing your first reducer): The first part to code will be the Reducer. A reducer is a pure function that is solely responsible to update the state you can not mutate the state and can only update it using this function. You also have to supply the initial state to the reducer. For eg.

A Sample Reducer

Here todoReducer is a function that takes two parameters first is a copy of state and the other is the action( don’t worry it’s explained later) you want to fire. Our reducer can handle two types of action ADD_TASK & DELETE_TASK. Notice that I’m returning a new object after updating this you should also take care of the state which is immutable and if you try to update it you’ll end up scratching your heads the whole day unless you correct yourself..

• Step 3 (Creating store): Till now we haven’t used the redux or react library so let’s use our first library and import the createStore function from redux library. createStore function takes Reducers as an input parameter. (Please note that for sake of simplicity we are using only one reducer here. However, you can have more than one reducer as per your need)

CreateStore function

Here a Store is created using function createStore and initial state mentioned in the reducer. Now, this can be used in any part of your app as a single source of data and you can update this using the reducer you have passed.

• Step 4 (Make your Store available to all components): To use the global state(store)inside your component you have to wrap your outermost container/component with a component available in react-redux library Provider in which you have to pass the store as props. Here is a code snippet:

Provider component to pass on the store to App

• Step 5 (Connect your component to store): Now, Everything is in the order we can connect our components to receive updates and make updates, We do so by another function provided by react-redux called connect. the function connect(there are more parameters learn as you need) usually take two functions as input.

1. mapStateToProps: This function receives a copy of state(store) and it simply maps or provides them to the component’s props. In our example here is the function:

mapStateToProps function sample definition

2. mapDispatchToProps: This function is used to map action dispatch functions to props. This function receives dispatch as a parameter. dispatch itself is a function that can be used to fire an action.

Action: An action is a plain object which typically contains two keys namely type which specifies the type of action( used by reducer to execute the required block) and payload which contains the data by which we want to update the store.

Here is a snippet of mapStateToProps :

A sample mapDispatchToProps function

Together these two functions make the state(store) available to all the components. Here is how you connect all the pieces and make your component subscribed to the global redux state.

connect function connecting the store to component

I hope you have got all the concepts and the code and here is the code for the full application.

https://github.com/assembler123/redux

Thank You!!