Another Powerful React Hook — useReducer
By Abhilasha Sinha React April 1, 2019
This blog is dedicated to yet another useful React hook “useReducer” in continuation to my previous blog, and some strategies to define state in React components using hooks.
To read some of our interesting blogs on React and React Hooks click here.
Get in touch with our technology experts today for help with your applications and useful recommendations or visit our React Technology page.
The useReducer Hook
The useReducer is a powerful alternative to the useState hook which allows us to initialize state, as well as, encode all the possible actions that can be performed on the state centrally.
The useReducer hook becomes the predictable state container for a component locally. If you are aware of how reducers work in Redux, you can think of the same functionality being rendered by the useReducer hook locally to the component.
We will take an example of a Pizza Toppings picker where the users can select and drop any number of toppings into their recipe bag.
The state would comprise of the ToppingsList which will have the toppings and their count. To keep the example simple, we will initialize the state to a specific set of toppings.
const initialState = { toppings: { Tomato: 0, Onion: 0, Meat: 0, Olive: 0 } };
toppings: { Tomato: 0, Onion: 0, Meat: 0, Olive: 0 }
Next, we will identify the operations to be performed on the state. In this example, we can add a topping or remove the topping(s) as desired. Also, we have the liberty to reset the toppings to the initial state.
Follow us on :
https://www.facebook.com/walkingtreetech/
https://www.linkedin.com/company/walking-tree-Technologies
https://twitter.com/walkingtreetech
https://www.youtube.com/channel/UCH5y9upqT2M7uWwgRWjCWBg
Thus, we will define the reducer function to handle all the 3 operations namely, ADD, REMOVE and RESET. Each reducer action receives an action type with the payment and accordingly, it either returns the value for the modified state or the original state as depicted below.
const toppingListReducer = (state, action) => { let oldCount = 0; let updatedCount = 0; switch (action.type) { case “ADD”: oldCount = state.toppings[action.payload]; updatedCount = oldCount + 1; const updatedtoppings = { …state }; updatedtoppings.toppings[action.payload] = updatedCount; return updatedtoppings; case “RESET”: return action.payload; case “REMOVE”: oldCount = state.toppings[action.payload]; if (oldCount <= 0) { return state; } updatedCount = oldCount — 1; const updtoppings = { …state }; updtoppings.toppings[action.payload] = updatedCount; return updtoppings; default: return state; } };
const toppingListReducer = (state, action) => {
oldCount = state.toppings[action.payload];
updatedCount = oldCount + 1;
const updatedtoppings = {
updatedtoppings.toppings[action.payload] = updatedCount;
oldCount = state.toppings[action.payload];
updatedCount = oldCount — 1;
updtoppings.toppings[action.payload] = updatedCount;
Now, we create the hook in our functional component passing the two values illustrated above as arguments i.e. the reducer function and the initial state.
const [toppingList, dispatch] = useReducer(toppingListReducer, initialState);
const [toppingList, dispatch] = useReducer(toppingListReducer, initialState);
This returns two variables, The first (toppingList), is a state that can be used to get access to the state at any point of time.
The second (dispatch), is the reference to the reducer function using which we can dispatch/invoke any action to be handled by the reducer.
Originally published at walkingtree.tech on April 1, 2019.
