Introduction
There is an ocean of things that developers can learn and since people are mortal and have limited time and brain capacity it's important to be diligent about choosing what to learn. The point of this article is to give you a basic introduction to Redux to see what it is and whether or not you need it. The simplest way to put it is, Redux is a container that holds the entire state of your application and handles how you access, read and change that state.
Now before we dive a bit deeper into what Redux is, let's take a look at situations where Redux may be a useful tool for you to learn and some of the negatives that come with it. This way you only have to read the beginning of this article to decide whether or not you want to keep reading and if you decide it's not what you need then you can hit the eject button and continue searching for other solutions to your problems.
Use Cases
Redux is very popular among developers and for good reason but you don't have to scroll very far down your google search results to see there is also a lot of debate about its hype. While Redux is a powerful library I consider it to be a bit of a swiss army knife, great at a lot of things but not specialized at any one particular thing. As an example, in place of Redux you could use a combination of GraphQL and the Apollo client library, both specialized in their respective fields and can combine to essentially do the same thing as Redux.
If you are only looking for a way to avoid having to pass props down through your components then you would be better off utilizing React Context. Context allows you to benefit from an important tool of Redux without having to haul the tool box around. Now it's important to point out that Context is not a state management system. You will still have to handle the data ,typically with useState, and decide where the state lives, handle how to update it and then put the value into Context for distribution. But again if you are just trying to avoid prop drilling, this is the way to go.
There are some other situations where Redux can come in handy. If you have large amounts of application state that are needed in many places throughout the app, Redux is definitely not needed for smaller applications. If you have app state that's going to be updated frequently, the logic to update state is complex or the app has a medium or large code base that will be worked on by many people. Also Redux is great for seeing how your state is being updated over time, the redux devtools is great for this.
To end this section i'll say this, take a careful look at your application and the problems or obstacles you are trying to overcome to see if Redux is the tool for you, if not there’s most likely a better solution. If you aren’t sure you need Redux, you probably don’t.
What is Redux?
Redux is a standalone library that, while mostly used as a state management tool with React, can be used with different JavaScript frameworks like Angular, Inferno, Vue, Preact and many others. The state of your application is kept in a store and any component in your app can access any state that it needs by accessing said store.. (I should throw this in early, if you are new to React or are not confident working with React, I suggest doing that first and utilizing Reacts built in state management. Doing so will help you better understand how Redux works as well as help you decide if Redux is something you need. Ok back to it) A great feature of Redux is it’s independent of the components which allows (as mentioned above) us to avoid prop drilling, I may mention this a few times because it’s one of my favorite features of Redux. I found the following diagrams helpful for seeing the difference Redux makes in the data flow.
Without Redux
With Redux
So we’ve been using the term “state management” a few times and it's important to quickly make sure we define what that is. Like a lot of things it’s exactly what it's called, the management of state. Being a little more specific, It is the process of managing the data that components need in order to render themselves. The data is typically stored in object form and when the state changes the components will re-render and update with the new state. With Redux it is a tangible data structure that represents the state of your entire application. You can read from and write to it and it makes visible otherwise invisible states.
How does Redux work?
There are three core components in Redux: actions, store, and reducers. Let’s take a look at each of these.
Actions: Actions are the vehicle data takes to get from the application to the Redux library. Actions are plain JavaScript objects that require a type property to inform the library what kind of action needs to be carried out. It also needs a payload, this is an object that contains the information that will be used to change the state. Actions are created by a function that, we’ll, returns actions also known as an action creator. These actions are executed using the “useDispatch” hook.
Reducers: Reducers are pure functions(meaning given the same parameters they will always return the same thing) these functions preform an action which changes the current state, it then returns the updated state. How the data changes in response to the dispatched action is handled by the reducer. Lastly the store.
Store: The store is a JavaScript object that holds the application state, the actions are dispatched to the store, handled by the reducers and updates the store. The store is the way individual components can access state and also update it.
Conclusion
Redux is a great tool that can be a handy solution to your problems. As this is only a brief intro to Redux I suggest you dig deeper to see all that it has to offer such as the different middleware’s that are available. Also weigh the costs of using Redux such as the amount of boilerplate code required and see if it’s worth it. Remember a good rule of thumb is, if you don’t know if you need Redux, then you probably don’t.
I hope this article was helpful and good luck on your dev journey!
Top comments (0)