React-Redux

What is Redux?

Simply put, Redux is a layer on top of React which helps in state management. Redux is mainly used in applications which rely on using class-based components. Redux has two tasks and they are:

• creating a central data store for all the data in the application
• providing access to the data for all the components.

Redux makes state management really easy. Let me illustrate with an example. Let's say that we have two components nested in different parent components. However, they need access to the same data. This would be a cumbersome process if you do it the conventional way. And that is to pass down props to the various components until it trickles down all the way to the ones that require it.

How Does Redux Work?

Redux works in 4 simple steps:

1. A Redux store needs to be created where we store all the data (just as the name suggests).
2. Components subscribe to the data in the store so that it can be used by them.
3. Whenever we want to update the state, we need to dispatch an action. Ex. You want to delete a list item when you click on it. So, in the callback function which deals with the onClick event, we dispatch an action to the reducer, which is like the manager of the store. Only the reducer has access to the store. We can also pass additional data along with the action.
4. Based on the type of the action, the reducer carries out different assignments. Continuing with the previous example, if the action type was 'DELETE_ITEM', the reducer is told what to do to deal with this action. And in our case, it would be to delete a specific item from an array structure (probably based on its ID).
5. Now, once the action is carried out, the store is swiftly updated. And in turn, the components which subscribed to the data which also get updated.

Now, let's see how we can use Redux in an actual application.

How to Use Redux

Firstly, we will need to install 2 npm packages. And they are:

• redux (to create store)
• react-redux (to connect the store with the application)

Then, we will create the store in the index.js file. This is because index.js is the file that starts the application.

We pass the rootReducer (the main reducer) as an argument when we are creating the store. This is to specify that this reducer is the one that has access to the store.

In a component, to connect to the store, we need to import a function called connect. Connect, on being invoked, returns a higher order component (HOC) which we wrap around the component. We pass a function, mapStateToProps, in which we specify the data form the store that we want to subscribe to.
We can also pass a second function which we use to dispatch an action and is called mapDispatchToProps. A method is added to the props of the components and is called whenever a certain DOM event is triggered. Then, the action gets dispatched and passed into the reducer.

Initially the state is empty. So, we must define an initial state in the reducer. In the reducer, we must write conditions for what must occur when an action of a specific type is dispatched.

Thanks for Reading!

And that's it! Redux is a topic that many developers struggle to grasp. But, once you get the hang of it, you realize what a great tool it is.
If there's anything you would like to discuss, you can contact me on any one of my social handles. I would love to hear from you!
Twitter: @nrabhiram
LinkedIn: Abhiram Reddy
Instagram: @nr_abhiram