Implementing Redux in our React app with Hooks is so easy!
Redux helps us to manage our app level state and makes it accessible for all the components directly. This helps us to avoid prop drilling and simplifies the data flow.
But the complexity in understanding, implementing redux is difficult especially for beginners. Don’t worry, the introduction of hooks changes this and makes it much easier to understand and implement redux in our react app.
In this article we will create a simple shopping planner app to implement and understand redux with hooks.
First let us understand the terms involved:
Store — Redux store is the one containing our app level state.
Provider — Provider is a component which connect our store with our app components
Reducer — A reducer is a function receives the action with data and updates the existing state with new values.
Action — An action is nothing but an object with name of the action and any value associated with it.
Action creator — It is an optional way to create an action object.
useSelector — It is hook to get our store data from provider and give it to our components.
useDispatch — It is a hook which dispatches an action.
Don’t feel overwhelmed. All these terms will make sense once we understand the redux flow.
The General Flow of Redux
The above diagram shows the simple data flow of a redux store in our react app.
When our app initially loads, our redux store will be created. This store contains our app level state.The provider connects the redux store with our app by passing it to our components.
The components, which is the user interface of our app now ready with initial app level state data. When an event happens in our components, an action will be dispatched with action type and data associated with it.
Now, the reducer receives the dispatched action and according to the action type updates our state with new data. When the state updates, the provider passes the updated state to the components. Finally, the components update according to the new state data.
Now, let us understand this general data flow of redux through our shopping planner app.Our shopping planner app helps us to fix a budget and add items to be purchased within the budget limit.
Initializing the store
At line no 10, you can observe that we have created our store. Our store holds all our app level data in an object received from rootReducer function.
A reducer is the one accepts the actions and data and returns the new state to the store. Now the provider makes the store available for our entire app. Now, All the components inside our <App /> can access our store.
Our Reducers
Now, Let us explore what is inside our rootReducer function.
Our app can have one or more reducers. But our store accepts only one reducer. So we use the helper function combineReducers from redux to create a single rootReducer. Now the rootReducer receives multiple objects from various reducers of our app, then combines it and returns one combined object to our store.
The budget object received from budgetReducer and purchaseList object received from purchaseReducer and then rootReducer combines both and returns it to our store as below.
Our components
Our App has two components. Budget and PurchaseList.
The Budget component displays budget and changes it. The PurchaseList component displays all our purchase items and we can add, remove items. It also shows item count, value and remaining balance.
This image shows how our app looks like initially.
Let us change our budget and understand the data flow step by step :
- Initally our budget is 0. Now let us add Rs 1000/- to it. When we click on save button on the UI, it dispatches an action object created by changeBudgetAction function.
At line no 15 you can observe that we have dispatched an action object. The changeButtonAction is called action creator. The action created just returns an object containing action type and data associated with it. Here, we use useDispatch hook from redux to dispatch this action.
Here, the action type is CHANGE_BUDGET and the value is amount:1000.
2. Now the budgetReducer receives the dispatched action CHANGE_BUDGET. Then updates the state with new budget value. Our store gets the updated state {budget:1000}.
3. Now, we have to update the new state value in our UI, so that our user can view the new budget limit. We already knew that, the store data will be available to our components through our provider.
We have to fetch the store value from our provider at component level.
At line no 10, you can observe that we have used useSelector hook from redux to get the new budget value from the state and update our UI.
Now we have completed a cycle of updating the budget and showing the latest value from in our UI.
Let us add an item to our purchase list and understand the data flow step by step :
- Currently we have an empty purchase list as below in our store
Let us add an item Notebooks with amount 500.
When we add a new item the action creator addItemAction will be called with our dispatch hook from redux. The addItemAction just returns an object with an action type and the value.
2. Now the purchaseReducer receives the action dispatched and updates the state with new purchase item data.
This will update our store with new purchase item as below.
3. Now the provider makes the new store data available to all our components. We need to update the ui with the latest store data.
At line no 9, you can observe that we have used useSelector hook from redux to get the latest purchaseList value from our store and update our ui.
I hope this step by step explanation helps you in understanding redux with hooks in our react app.
If you wish you can explore how removing an item will work following same steps explained above.
You can find the entire code at the repo muniyandibg/shoppingplanner (github.com)
