Writing in the front

If you want to learn React and use it to solve the various business scenarios you encounter, you’ll need to know useReducer.

Combined with my own learning experience and use experience, I write this blog to share the most simple knowledge points of useReducer with you.

What is a useReducer

UseReducer is an extended Hook introduced by React. As shown in the following code, it accepts a Reduce of (state, action) tail newSatte and returns the current state and its associated Dispatch method. If you’re familiar with Redux, you’ll have a pretty good idea how useReducer works.

const [state, dispatch] = useReducer(reducer, initialState)
Copy the code

Here are a few of the above variables:

  1. InitialState: An initial variable that we want to manage. It can be a number, string, array, object, etc.
  2. Reducer: the reducer is a pure function defined by us. Its purpose is to change the initialState variable using the defined logic to serve our project.
  3. State: After processing the data, the logic in Reduce returns the latest value, which is the state
  4. Dispatch: Triggers. Many conditions are defined in the Reducer. Which condition should be used to change the initialState variable is controlled by the triggers.

To sum up, we use dispatch to trigger the reducer pure function. We use the logic in the reducer pure function to change initialState to a new variable, assign the variable to state, and return the variable.

In this regard, useReducer and useState are very similar. As shown in the following code, we use useState like this:

const [userName, setUserName] = useState("Allen")
Copy the code

UseState takes an initial value of “Allen” and returns the latest value userName with the method setUserName to modify the latest value. As can be seen from here, useState is the encapsulation of useReducer. UseReducer is a more native Hook. You can use useReducer wherever useState is used. We will give useReducer several usage scenarios later.

Why use useReducer

If you are a programmer who is new to React Hooks, you might prefer to use useState over useReducer, because useState is so easy to use, you need to manage several variables in the component, just define as many variables and methods as you can with a few Usestates, and that’s fine. But many experienced programmers recommend you use useReducer for the following reasons:

1. UseReducer is more appropriate in scenarios where large amounts of data need to be managed

UseReducer is more appropriate in some business scenarios. For example, a component should collect many aspects of the user’s information, such as height, weight, gender and other basic information, education, professional expertise and other school information, company position and length of service and other unit information.

If you had to create variables for each of these things, it would be too tedious. Even if you use one or more objects to store it, it’s not clear enough, and useReducer is handy, as we’ll show in a later example,

2. Using useReducer is more convenient for other programmers to understand

Most programmers are familiar with Redux and are used to using Dispatches to trigger an action and then get the latest state. In this case,

He will come to read useReducer with add handy. But for them to learn and master useState, it obviously takes some time.

How do I use useReduce to manage the state in a component

Here is a simple example of how to use Reducer to manage state in a component.

This is a counter that can increment, decrement and reset. If you are interested, you can check this example directly in codesandbox: codesandbox.io/s/react-use…

1. First we need to define an initial variable

In general, this variable is an object, where the variable has only one attribute, amount, which represents the current amount:

const initState = {
    amount: 0
}
Copy the code

2. Then we need to define reducer

Reducer is a pure function. This pure function takes two arguments and eventually returns an updated status value.

The two arguments are initState and action. Initstate is the initial state of the state value to be managed. Action is a command that tells the Reducer how to manage the state value.

The variable returned is what we call the latest status value. The reducer code defined here is as follows:

const reducer = (state, action) => { switch (action.type) { case "add": return { amount: state.amount + 1 }; case "minus": return { amount: state.amount - 1 }; case "reset": return { amount: 0 }; default: return { amount: 0 }; }};Copy the code

4. Use useReducer to define the state and the methods to trigger reducer

The code is as follows:

const [state, dispatch] = useReducer(reducer, initState);
Copy the code

5. Use Dispatch to trigger the action to change the status

In practice, we need to use dispatch to trigger an action. The reducer operates according to the action type. The following codes are used:

<button onClick={() => { dispatch({ type: "add" }); }} >Add</button> <button onClick={() => { dispatch({ type: "minus" }); }}>minus</button> <button onClick={() => { dispatch({ type: "reset" }); }}>reset</button>Copy the code

Combined with specific examples, this paper introduces how to use useReducer,

I have seen an article before, which describes the use scenarios of useReducer in detail. It is directly listed here, and interested partners can read it by themselves:

Several use cases using useReducer in React Hooks: juejin.cn/post/684490…

Write in the last

Above is their own summary, there are mistakes, but also hope to be corrected.