Understanding React, Redux, and React-Redux
React is indeed a trending JavaScript library for building great UI components. But I am here to talk about something which I believe is very important and somehow every application (be it a React or any other platform specific) needs it.
What is it? The answer is State Management. I don’t want to miss out on anything, so let me first answer what does state management means when it comes to application development.
State Management is some thing which takes care of the changes in any part of the components/application. In layman term, it is nothing but a management of a data state for event handling inside the application.
Now, since we have already known this great platform React, let us understand what Redux is.
Redux is a predictable state container in Javascript app. What does that mean? Well, Redux helps in state management by storing all the states which needs to be changed through out the app in one place, which we usually call it as Store.
You need an example! Well, here you go [very basic]: Let’s say we are using an application, having a navigation drawer containing User’s Data. Now when you go to the profile page, and make some changes in your data which is User’s data only, and when you come back to the navigation drawer, it changes the data automatically without even problem! Isn’t it amazing. This is because of State Management only, and in React, the famous State Management library is Redux only.
Disadvantages: Redux comes with a lot of boilerplate, and believe me many JS developers are not a big fan of this library. And if you don’t follow it properly, chances are, your application might break or behave inappropriately. So think before you use. Now, I don’t want to make this blog long enough, but check this link out, which has Why you don’t wanna use Redux? You might find it funny, but the irony is, the one who developed Redux wrote this article! :D
Now, since you have made your choice to move further and try to deal with this, I am here to help you understand with some analogies, and not code. [Code] That you will get it on the internet any time, any where.
First of all let us answer this question, why we really wan to use React-Redux in the first place
React-Redux as the name and the official documentation says, it binds the React application for the Redux. Still confusing? Let me break it down for you, so React-Redux lets you use all the operations from Redux in the React application.
Here comes the most dreadful part, and understanding what this boilerplates are. But before that we might have some question which needs to be resolved. And here it goes:
Q1. If Redux can be used in normal JS application, then why to use React-Redux?
Answer: Redux is indeed usable in JS application, but when it comes to using React-Native, we require somethings which can make our component capable of using Redux, and these are mapStateToProps and mapDispatchToProps. And which makes the aforementioned think work is connect(). Provider (which is provided by React-Redux only) is the most important thing to be used when it comes to making all things work on your state change throughout your app, which is keeping your business logic separate from the application logic for state management operation safely. Now there are other things which are associated to React-Redux, but I assume, you would find in the official documentation.
Q2. If Hooks have already been introduced in React-Redux, then why use the above connect(), mapStateToProps and mapDispatchToProps?
Answer: React-Redux has introduced the hooks recently, like an year. Now, there are edge cases which are associated to using different hooks which. replaces all the three assets to Redux implementation. Some of them are:
- Dealing with Store Objects which have nested data. For example: User can have complicated data structure, and when you will try to deal with making changes in your state management through object notation, your application might break.
- Interested in reading more? Here is the official link for you.
Phew! Feeling tired? Take a quick break and continue reading this blog, cos the cream data is about to come. We are going to be talking about:
- Analogies on the boilerplates used in the React-Redux
- What is the right approach for using the boilerplates
I am sure you might have got intrigued by the above pointers. So let us start diving into the main content one by one. So, let us first answer the question, how do we understand the boilerplates in a simple/layman way. I have something for you, with which I also understood these boilerplates. Let us see what it that.
The above picture depicts what is the process which is involved during the state management process. Technically speaking, this is what Redux is about. Now, the above things which is shown in the blue box are your boilerplates. I know, you will think, are these things needs to be done for playing around with the Redux? The answer is yes, and that is why not every developer looks forward to use Redux.
But don’t worry, I will give you some analogies which will help you understand how to tackle it in a simpler way. And the best way is indeed understanding.
View: It is nothing but the front-end of the application, what ever changes happens, it should reflect the same on the application. Now, in an analogy I would say a store which you see from the front. Let us call it as a toy store. You are standing in front of it and looking at it, if somebody purchase, or if the store gets some more toys, you see the changes being done in the shop. This is a View, and we will use it further to understand the other boilerplates.
Store: If we talk about this, the name depicts every thing. Store basically keeps all your state management data in one place, so to understand in an analogy, a toy store which we talked about in the View keeps all the toys in it’s store. Some other store keeps other stuffs. Hence stores.
Action: In Redux term, it has to dispatch an action to the Reducer, so that the state management can be done according to the action sent, which will eventually be reflected in the View of our application. Now, we have seen two new things, which we need to understand, and these are: Action and Dispatch. How can we understand both of them, and how are they linked with each other? Well, take Action as a thought which comes into your mind, when you enter inside the toy shop, for example, I want to buy a toy or many toys. And Dispatch is something which comes out of your mouth, basically your voice/command/request, which sends a message to the Shopkeeper on why have you come to the shop.
Reducer: In Redux language, it is something which makes changes to the the State object in the Store, to be reflected in the View. Sophisticated, right? Now let us understand it in the analogical way, now you have entered into the store, and asked (Dispatched) for buying a toy (Action). The request you have raised to a person who would be standing on the other side of the store, we call him/her a shopkeeper, but he/she also is a Reducer. Your next question would be how? Then let me tell you how, as soon as you raise a request, the shopkeeper picks up the desired item for you and gives it to you in exchange of money. Now let us neglect the money part for a while, and focus on the toy reduction. So what happened actually in between the process? The shopkeeper (Reducer), made changes in the store by reducing the number of toy from the store, and hence the View (Toy Shop) is also changed, that is, the number of toys in the shop is changed now.
You then go to your home happily, without even realizing that you have actually performed a Redux State Management in real life. :D Isn’t it amazing. I believe, you might have got the real essence of the boilerplates by now. If not, read it once again, or watch some videos simultaneously, or docs. Whatever source which will make you better understand the things which I have written in the blog.
Coming to answering the next major question, and that is, how to approach the boilerplates or Redux in our application.
Disclaimer: Developers have their own way of coding, structuring the files for Redux. Whatever I am going to tell is my suitable way of doing the Redux in the React application, feel free to follow your way of doing things which is best for your case.
The right way of approaching your React-Redux implementations are:
- Create your Actions and Action Creators: Now you might be feeling confused on what Action Creators are. Allow me to explain, Action creators are nothing but an extra step of making your actions defined safely, so that when your code grows, you can always come back to your creator, and make changes. Handling bugs becomes easy and safe. Action Creators, accept the action type which comes from the Actions file.
==> Now Action types, are set of constants and you should always maintain a separate file in order to define all your constants, and use it places wherever required. In this way, a single change in the Action types’ file, will make changes in every file. No need to explicitly doing it in every folder. Example: const BUY_TOY = “BUY_TOY”. Now use the constant BUY_CAKE, and it will be coherent every where. Let us see how you action creator looks like:
Note that BUY_TOY is coming from another file ./actionTypes where we have defined the BUY_TOY constant as per the above stated example in bold.
- Create your Reducer: For reducers, it accepts two arguments, one is State, which has to be initialized in the function, and another is Action. Again, the action type will come from the ./actionTypes. So you see how important is structuring of your code. What reducer does is, basically based upon your action performs the action on the States, which eventually make changes in the View only. Also, your state should consist of all the data in object form. Let us take a look, how our reducer looks like
There are certain other things, which are related to Reducers, one of them and the most important of all is, it is immutable in nature. What is Immutable? Immutable means, you can alter the reducer, and to make things possible, we first create/make a copy of our state, and then make changes. Although, there are things present at your disposal of doing the mutable changes for the reducer, but I believe the link which I will share will tell you more about it. Although, there is one library which I want to talk about which handles your Reducers efficiently, that is, ImmerJS: A beautiful and award winning library that handles the reducers, along with the immutability. Here is the link for you.
- Creating a Store: Now that you have successfully created your Reducers, it is time to bind all of them in a place, called as store. How will we do that, here is the example.
- Final Step => Providing the store to be available for your whole application: Now that we have the store, the same has to be provided to your application, so that the application can access the store item’s update any time anywhere. How can we do that, just go to your file in App.js or index.js and bind your project inside the Provider, which is a component of React-Redux, accepts a prop as store, which has to be provided by use, which we created above. Let us see, how it is done:
And voila! You have just handled the boilerplates nicely. Now one more thing which is remaining in order to handle the state change, and that is when you are inside the view and you want to make changes, so that it should reflect. That I will leave it to you, so that you can read, and implement. If you have understood the above content, handling the state management would be not so difficult for you. Let me give you some hints, you must read about mapStateToProp, mapDispatchToProp, and connect. React-Redux hooks like useSelector and useDispatch.
This was a very basic example on how to get started with State management in React application using Redux, React-Redux. There are more things for you, but do not start off with that immediately unless you have a better understanding of how to do the basic implementation nicely. Here are the links for you to get more insights on the Redux, React-Redux. Do read the docs, it will help you in the long run.
- Redux Documentation:
- React-Redux Documentation:
I believe that is it what I can offer for this topic, and I would be grateful if I could help somebody with this information. Pardon me, if I have done some mistakes, do let me know in the comment section. I am also a developer like you who commits mistake, so let us learn from each other, and happy learning.
Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you
