What is Redux and why do you use it?
Redux:
Redux is a tool that helps manage states effectively in JavaScript applications. This is particularly useful in single-page applications (SPA) where complex states management occurs. Of course, Redux can be used not only in React but also in applications using jQuery and Angular, but this article is about Redux for React.
Intro
Using React, state management is one of the most important factors. Suppose there is a situation like the one below where there are child components that receive states from the parent component.
Because React’s data flow is one-way, child components that exist in the parent component layout are passed on to the parent component states to the props. When the state value of the parent component changes, the child components change the data or UI according to the changed state. That is, they go through a re-rendering process.
Note: the components are re-rendered in several situations:
1. When the state of its own component changes
2. When the parent component is re-rendered,
3. When the props value the components receive changes,
4. When the forceUpdate function runs
In other words, if the states of the parent component change in the above situation, the parent component will be re-rendered, and the child components will be re-rendered, as well. Therefore, we should try to minimize the states of components in managing the condition.
Why do you need Redux?:
As mentioned above, using React, states management is one of the most important factors. Single-page applications (SPA) that can be created as React often become complex and diverse, with data or UI changes. This also complicates the data exchange of components that form a single page, so you need a way to manage them efficiently. Redux is a tool that helps you manage these complex states efficiently.
Tell me examples:
If there is a SPA with the same layout like the picture below.
Because React’s data flow is one-way, the child (stateless) components that exist in the parent (stateful) component layout are passed on the states of the parent component to props. If the layout is changed like above into a diagram, it will look like below.
Since the child components that will receive the state of the parent component are only one step, it will be easy to deliver and manage the states. However, if the depth of the child components is deepened as shown below, it will be another story.
The layout like the above in diagram form, it looks like below.
In the diagram above, let’s give two examples of transferring states to match the flow of data between parents and children.
If you have to pass the states from the parent component to the lowest child component, as shown above, you have to pass the states through the parent-child-grandchild-great child path. Even if the state change is unrelated to the child components between the parent and the child at the bottom, it is a component that must be passed to deliver the states to the child at the bottom. If the components of this type of parent-child relationship become deeper, it will certainly be much more challenging in managing the condition.
Here is another example.
The events in the child component in the lower-left corner will also complicate the management of the state of the component in the other root.
So, how does Redux handle this situation?
As the definition of Redux mentioned at the top of this article, Redux is a tool that helps you manage your condition efficiently.
In the intro, I mentioned that it is better to minimize the states of components because the states change leads to re-rendering. However, over time in SPA, state components are bound to increase. Redux eventually helps you manage more state components more efficiently. Just like below.
Use the above store to keep the states outside the component structure and update the states through an intermediary called the store, or to receive a new state.
This means that with the Redux, you can manage the state outside without having to depend on the component as shown above.
Then how does the store catch the need for a change of state, and how does it deliver a new state?
Overall flow of Redux
Looking at the overall flow, there are still a lot of unfamiliar words, and it seems more complicated. Let’s take a look at it one by one.
The concept of Redux.
First of all, let’s find out the definition and role of terms in the overall flow of Redux. If you want to use Redux, you’d better organize them well because they’re important concepts.
1. Action
When a state is needed to be changed, the action is taken. This action is expressed as a single object. For example, if you add or delete a product to a shopping cart, there should be a type definition of the action for adding or deleting.
{ type: "ADD_PRODUCT", data: { id: 0, text: "redux" }}
Actions must have a field called type, and additional elements of the required object can be added as needed. This is the same as the data field above.
2. Action Creator
Action Creator is a function that creates an action. Input the parameters and make them into action objects.
function addProduct(data) { return { type: "ADD_PRODUCT", data };}
This function enters a parameter called data and returns the action in the form of an object.
3. Reducer
A reducer is a function that causes change. This function receives the previous state and action as parameters.
function reducer(state, action) { ... return alteredState;}
The return value returns the state value changed by logic.
4. Store
A store is a state store that is located outside of a component. Inside the store, there are current states, reducers, and several built-in functions.
5. Dispatch
The Dispatch is one of the built-in functions of the store, which is responsible for generating actions. There was a question that ‘How do the store catch the need for state change?’ in the header of this category. Dispatch immediately initiates an action to inform the store that a change in state is required.
Then the action calls the reducer function and changing the state to the logic for the action.
6. Summary
First, defines each action type, such as adding or deleting. The action function receives each action type and parameter and returns the action in the form of an object. If a change in state is required, Dispatch issues an action and notifies the store. The action passed to the store calls the store’s reducer function. This function returns the changed state by passing the previous state and action type as parameters and changing the current state value as defined logic. The returned state is stored in the store.
It needs rules to manage this complicated process in a stable manner.
In order to use Redux in a stable manner, you have to follow 3 rules.
A single store is recommended.
Using one store for one application recommended.
The states should be read-only.
If there is an array-type state, and logic requires a new value to be put into the array, it should be updated by replacing it with a new array created by attaching the new value through a function such as concat, not by pushing the new value directly into the existing state. This method of updating preserves the immutable.
Updates that remain immutable use these update methods because they are state changes that are appropriate for shadow quality, which is the method of detecting changes in Redux.
Redux must be a pure function.
A pure function is a function that always produces the same output when the same input is received. If we create a logic that changes the background color randomly when we click on an action, we have to generate a random value within the logic of the function. Generating random values is a function that is not pure because it means that the output eventually changes every time.
Conclusion
In this article, we studied the overall concept of a tool called Redux that helps us manage the condition of React efficiently.
There are a few more tools that help you manage your condition, such as React Context API and MobX, but like React’s best friend, Redux is the most popular state management tool, so it must be a tool that you must learn if you use React.
Just because of unfamiliar terms, you may still feel rejected, but I think it’s good to move on to the point that there’s something like this now.
It will be much more helpful to understand if you learn Redux with a practical example in the next posting.
