useReducer的介绍

useReducer是一个用于状态管理的hook api。使用userReducer可以使我们的代码具有更好的可读性、可维护性、可预测性。

const [state, dispatch] = useReducer(reducer, initialArg, init?)

参数介绍

reducer: 指定state如何更新的reducer函数，reducer函数以state和action作为参数，并且应该返回下一个state。state和action可以是任何类型的，没有限制。 initialArg: 初始state值。 可选init: 返回初始state的函数，如果init没有指定，则初始状态为initialArg，否则，初始状态将调用init的结果。

useReducer的return值介绍

state: 目前的state，在第一次渲染期间，它会被设置为init或者initalArg（如果没有init）。 dispatch: dispatch函数更新state，并触发重新渲染。

useReducer的使用

1. 添加useReducer到你的组件

import {useReducer} from 'react';

function myComponent() {
    const [state, dispatch] = useReducer(reducer, {name: '123', age: 42})
}

1. 写reducer函数

function reducer(state, action) {
   switch(action.type) {
     case 'incremented_age': {
        return {
           name: state.name,
           age: state.age + 1
        }
     }
     case 'change_name': {
        return {
          name: action.nextName,
          age: state.age
        }
     }
   }
   throw Error('Unknown action:' + action.type);
}

注意事项： 在reducer函数中的state是只读的，不能进行赋值操作。 badcase\color{red}{bad case}badcase

function reducer(state, action) {
  switch(action.type) {
     case 'incremented_age': {
        state.age = state.age + 1;
        return state;
     }
  }
}

goodcase\color{green}{good case}goodcase

function reducer(state, action) {
  switch(action.type) {
     case 'incremented_age': {
        return {
          ...state,
          age: state.age + 1
        }
     }
  }
}

1. 避免重复渲染初始state

function createInitialState(username) {
}
function TodoList({username}) {
  const [state, dispatch] = useReducer(reducer, createInitialState(username));
}

尽管createInitialState的结果仅用于初始渲染，但你仍然在每次渲染的时候都会去调用此函数。如果是创建大型数组或者执行大量计算，这可能会造成浪费。 为了解决这个问题，你可以将其初始化函数传递给useReducer作为第三个参数。

function createInitialState(username) {
}
function TodoList({username}) {
  const [state, dispatch] = useReducer(reducer, username, createInitialState);
}

第二参数username是作为createInitialState的参数，如果createInitialState没有参数，则第二个参数可以直接写为null即可。

1. 通过dispatch去更新state，并重新渲染

import {useReducer} from 'react';

function myComponent() {
    const [state, dispatch] = useReducer(reducer, {name: '123', age: 42})
    const handleAddAge = () => {
       dispatch({
          type: 'incremented_age'
       })
    }
    return （<div>
       <Button onClick={handleAddAge}>增加年龄<Button>
       <span>{state.age}</span>
    </div>）
}

故障排除

• 在dispatch之后，部分reducer的state变成了undefined 解决方案：

function reducer(state, action) {
   switch(action.type) {
      case 'incremented_age': {
        return {
           ...state, // 补充上这句话即可
           age: state.age + 1
        }
      }
   }
}

useReducer流程图

useReducer with useContext

在某些场景想再组件之间分享state，进行全局的state管理时，我们可以使用useReducer加useContext。 考虑这样一个场景，有3个子组件A, B, C，要在子组件内控制同一个计数器，常规的写法是将 counter 的方法写到父组件上，然后通过 props 的方式将 counter 方法和 state 传给子组件，子组件中调用通过 props 传入的 counter 方法，就会改变父组件中的 state，同时也能改变作为 props 传递给子组件的 app 中的 state。如下图：

但是这种设计有个缺点，如果组件层级非常深的话，只能通过props一层一层地往下传，等到后期应用复杂度越来越高的时候，就很难维护了，这个时候就要使用useContext和useReducer了。

import React, {useReducer} from 'react';

export const CountContext = React.createContext({});

const initialState = 0;
const reducer = (state: number, action: string) => {
  switch(action) {
    case 'increment':
    return state + 1;
    default:
    return state
  }
}

const App = () => {
    const [count ,dispatch] = useReducer(reducer, initialState);
    return (
       <CountContext.Provider
       value={{
         count,
         dispatch
       }}
       >
         <div>
            <AChild/>
         </div>
       </CountContext.Provider>
    )
}

// AChild
import React, {useContext} from 'react';
import {countContext} from '../App';
function A() {
   const countContext = useContext(CountContext);
   return (
     <div>
       A - {countContext.count}
       <button onClick={() => countContext.dispatch('increment')}>+</button>
     </div>
   )
}

useState vs useReducer

场景	useState	useReducer
state的类型为number，string，boolean	建议	不建议
state的类型为object或array	不建议	建议
state多	不建议	建议
state关联变化	不建议	建议
state只在组件内部使用	建议	不建议
state全局使用	不建议	建议