[Essay 2] Detailed explanation of useReducer and its application scenarios

foreword

useReducerIn fact, it is an upgraded version of useState, which is used to store and update state, but the application scenarios are different.

Under normal circumstances, it is enough for us useStateto the project needs. When encountering the following scenarios, it is better to use useReducer.

• Complex state logic : When the state update logic is complex, use useReducercan encapsulate this logic in the reducer function to make the code clearer and easier to understand.
• Multi-component shared state : When multiple components need to share a state, you can put this state in the parent component, and then useReducerpass state and update functions to the child components to achieve state sharing.
• Need to handle multiple continuous state updates : When multiple state updates need to be processed consecutively, using useReducercan help us better manage state changes and updates.

1. useReducer parameter

Receives 3 parameters:

• reducer function : (state, action) => newState

When using useReducer, we need to define a reducer function first, this function receives 2 parameters

state: is the latest state value

action: It is used to tell the reducercurrently executed operation, and the reducer will execute different logic according to different operations, thus updating different states

newState: return value, return a new state

reducer is a pure function without any UI and side effects.

• initState

There is nothing to say about this, it refers to the initial state

• init : is a function,（inState）=> initialState

This parameter is 可选yes, it is a function, and the parameter is the initial state. If this parameter is passed in, then 初始stateis the return result of init(initState)

2. useReducer return value

returns an array

//
const [state, dispatch] = useReducer(reducer, initState, getInitData);

• state: current state
• dispatch: is a function,(action) => void

Pass dispatchin actioncalling to tell what reducerto do, then updatestate

for example:

dispatch({
    
    type: 'ADD', playod: 'xxx'})

Take a simple example:

import {
    
     useReducer } from 'react';

function reducer(state, action) {
    
    
  switch (action.type) {
    
    
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}

function Counter() {
    
    
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>Count: {
    
    count}</p>
      <button onClick={
    
    () => dispatch({
    
     type: 'increment' })}>Increment</button>
      <button onClick={
    
    () => dispatch({
    
     type: 'decrement' })}>Decrement</button>
    </div>
  );
}

In the above example, a reducerfunction to manage the state change, it actionexecutes different logics according to the passed in, and returns a new state.

In the component, we use useReducerto initialize the state, and get a dispatchfunction to trigger the update of the state.

When the button is clicked, dispatchthe function and an typeobject containing the property (action) will be passed in. This object is used to represent the state update operation to be performed.

Notice:

Using useReducercan help us better manage component state and make the code easier to maintain and debug. However, in general, useStateit may , and we need to evaluate it according to the actual situation in our daily development.