React--状态逻辑迁移至Reducer

理解从零开始实现 useReducer

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

 首先由官方文档易得出:

主函数中使用useReducer方法，返回dispatch函数和新的state状态

​
const [state, dispatch] = useReducer(messengerReducer, initialState);

​

JSX中使用dispatch()函数传入action动作对象时，是传递给自己编写的迁移状态逻辑函数（reducer）中

onChange={(e) => {
          dispatch({
            type: 'edited_message',
            message: e.target.value,
          });
        }

相应的自行编写状态迁移逻辑函数（reducer即此处的messengerReducer）部分

export function messengerReducer(state, action) {
  switch (action.type) {
    case 'edited_message': {
      return {
        ...state,
        messages: {
          ...state.messages,
          [state.selectedId]: action.message,
        },
      };
    }
    default: {
      throw Error('未知 action：' + action.type);
    }
  }
}

因此reducer(即此处的messengerReducer)返回的是新的state，在实现useReducer时，可以分三块进行：

1. useReducer函数需要调用useState这个Hook：

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);


  return [state, dispatch];
}

 2.dispatch用于传入动作action对象，以触发状态迁移逻辑函数来更新渲染组件，则dispatch为其中的一个函数

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    
  }

  return [state, dispatch];
}

 3.由reducer函数可知，action由dispatch给reducer使用，最后返回新的state状态，所以dispatch内部实现需要将action对象参数传递给reducer函数，并将返回的新状态（nextState）设置更新渲染：

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

 最后完成实现！

由于对官方文档中本节理解有些别扭，所以记录一下理解过程方便回顾，如果有更好的理解角度，欢迎在评论区赐教！