This content originally appeared on Level Up Coding - Medium and was authored by David Sands
Reuse, reduce. . . useReducer?
React is a wonderful tool that makes writing JavaScript applications much more accessible and cleaner. Anyone who has built both a vanilla JavaScript app and a React app will probably agree that the React app has definite advantages. Thankfully for us, hooks were introduced in React 16.8, which only further augments the library’s ease of use and elegance.
Some of the most commonly used hooks are useEffect and useState, both of which have a relatively shallow learning curve as they are pretty straightforward and employ simple syntax. However, in this blog post I want to discuss one of the more complex React hooks… useReducer. We will look at each of the steps required to implement this hook and discuss when it is most useful.
What is useReducer?
Before we jump into the code, let‘s talk about what useReducer actually is. The useReducer hook is very similar to the useState hook in that it is a tool used for managing state within an application. Essentially, it allows us to store state and setup rules for how we can manipulate that state within our application.
One of the most notable benefits of useReducer is that it allows for a much neater state management solution compared to useState, especially with more complex state. Additionally, as stated in the React documentation, useReducer is preferred over useState in instances where the next state is calculated based on the previous state. This is because useReducer produces a more consistent and predictable state transition.
The useReducer hook in action.
As a basic example, I have created this app that utilizes useReducer to manage/manipulate the count state. Feel free to open the sandbox and mess around with the code as you continue to read.
This app has an initial value of 1 (stored as a piece of state) and several buttons that can manipulate that state. Let’s take a look at what we would need to do to implement this app using useReducer.
- When utilizing the useReducer hook, the first thing we need to do is import it from React. This will allow us to “hook into” the useReducer feature:
import React, { useReducer, useState } from “react”;2. Next, we will get our initial setup for useReducer using destructing assignment syntax, similar to useState. In our example, this reducer function will take in two parameters, i.e. a function and an initial value, and will return an array (the state and a dispatch function):
const [state, dispatch] = useReducer(reducer, { count: 1 });3. Now we need to write our reducer function that we passed to useReducer. This function is going to take in state (current state) and an action. The action will be passed into the dispatch function mentioned above and will be set to whatever we call dispatch with (see 5):
function reducer(state, action) {}
4. Once we have our reducer function, we can start building out our actions using a switch statement. Here we can create a case for each of the state manipulations we want to perform:
5. Now that we have all of our different cases delineated in our reducer function, we can use our dispatch function to send an action to our reducer which will trigger the change in state associated with that action type. This is similar to the setter function in the useState hook:
These functions can then be passed to the event listeners on our buttons in our JSX:
Wait… a payload? Like in Crimson Skies?
As you may have noticed in the above examples, one of the dispatch functions has a payload object passed into it. This is where you really start to see the magic of useReducer. Lets take another look at our switch statement, specifically the set-number case:
case “set-number”:
return { count: (state.count = action.payload.value) };The purpose of this action is to set the counter to whatever value we enter in our form. However, in order for this action to know what that value is, we need to somehow let it know. We can do this by passing a payload into our dispatch function. The payload is an object that should contain all of the values needed to perform the specified action that we are calling.
const handleSet = (e, num) => {e.preventDefault();
dispatch({ type: “set-number”, payload: { value: num } });setNum();
};
As you can see above, we are passing a value of num (which is a piece of state that holds the value of the form on submit) to our “set-number” action so that it can set the counter to that number. In the switch statement we are able to get that value by drilling down into the object via dot notation.
TL;DR
- useReducer is a React hook that helps us manage and manipulate state.
- useReducer is most beneficial with complex state or state that is calculated based on the previous state.
- useReducer is set up using destructing assignment syntax. It is passed a reducer function and initial state and returns the state and a dispatch function.
- The reducer function takes in two parameters, the current state and an action.
- The reducer function contains all the actions for manipulating state.
- The dispatch function sends an action to our reducer function which will trigger the change in state based on our predefined rules.
- A payload is an object that is passed into a dispatch function and contains all of the values necessary to perform the action.
Reuse, reduce. . . useReducer? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by David Sands
David Sands | Sciencx (2022-03-19T21:13:20+00:00) Reuse, reduce. . . useReducer?. Retrieved from https://www.scien.cx/2022/03/19/reuse-reduce-usereducer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.