Reducer

假设有下面这样一个场景，ul 列表中的每个 li 都具有编辑、删除的功能，如果按照 state 的方式可能会写出下面的代码：

// components/TodoList.tsx
import { FC, Fragment, useState } from 'react';

interface Todo {
  id: string;
  content: string;
}

type TodoListProps = {
  todos: Array<Todo>;
  changeHandler: (task: Todo) => void;
  deleteHandler: (id: string) => void;
};

const TodoList: FC<TodoListProps> = ({ todos, changeHandler, deleteHandler }) => {
  const [editingTodo, setEditingTodo] = useState<Todo>(() => ({ id: '', content: '' }));
  const isEditing = (todo: Todo) => editingTodo.id === todo.id;
  return (
    <Fragment>
      <ul>
        {todos
          ? todos.map(todo => {
              return (
                <li key={todo.id}>
                  {isEditing(todo) ? (
                    <input
                      value={editingTodo.content}
                      onChange={e => {
                        setEditingTodo({ ...editingTodo, content: e.target.value });
                      }}
                    />
                  ) : (
                    todo.content
                  )}
                  <button
                    onClick={() => {
                      if (isEditing(todo)) {
                        changeHandler(editingTodo);
                        setEditingTodo({ id: '', content: '' });
                        return;
                      }
                      setEditingTodo(todo);
                    }}
                  >
                    {isEditing(todo) ? 'save' : 'edit'}
                  </button>
                  <button
                    onClick={() => {
                      deleteHandler(todo.id);
                    }}
                  >
                    delete
                  </button>
                </li>
              );
            })
          : undefined}
      </ul>
    </Fragment>
  );
};

export { TodoList, Todo };
// App.ts
import { FC, Fragment, useState, KeyboardEvent } from 'react';
import { Todo, TodoList } from './components';

const App: FC = () => {
  const [todos, setTodos] = useState<Array<Todo>>([]);
  const [value, setValue] = useState('');
  const changeHandler = (todo: Todo) => {
    setTodos(
      todos.map(item => {
        if (item.id === todo.id) {
          return todo;
        }
        return item;
      })
    );
  };
  const deleteHandler = (id: string) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  const addHandler = (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
      setTodos([...todos, { id: `${todos.length + 1}`, content: value }]);
    }
  };
  return (
    <Fragment>
      <input
        value={value}
        onChange={e => {
          setValue(e.target.value);
        }}
        onKeyDown={addHandler}
      />
      <TodoList todos={todos} changeHandler={changeHandler} deleteHandler={deleteHandler} />
    </Fragment>
  );
};

export default App;

在上面的例子中，App 组件里 setState 被多次调用了，如果以后还要添加其他需求，那么各种事件的处理函数可能会不断增加，为了将这种状态更新逻辑很多的组件的事件处理器集中起来，可以将所有的状态更新逻辑添加到一个外部函数中，即 reducer。通过下面的步骤可以将 useState 转为 useReducer：

• 将设置状态的逻辑修改成 dispatch 的一个 action。
• 编写一个 reducer 函数。
• 在组件中使用 reducer。

reducer 通过事件处理程序 dispatch 一个 action 来表明用户刚刚做了什么，状态更新逻辑保存在其他地方，不再像 state 那样通过事件处理器直接设置 task，而是 dispatch 一个添加、修改、删除任务的 action。

使用 Reducer 替换 state

第一步，定义 reducer，替换掉之前的 useState：

interface action extends Todo {
  type: 'add' | 'change' | 'delete';
}

const tasksReducer = (prevState: Array<Todo>, action: action): Array<Todo> => {
  switch (action.type) {
    case 'add':
      return [...prevState, { id: `${prevState.length + 1}`, content: action.content }];
    case 'change':
      return prevState.map(todo => {
        if (todo.id === action.id) {
          return {
            id: todo.id,
            content: action.content,
          };
        }
        return todo;
      });
    case 'delete':
      return prevState.filter(todo => todo.id !== action.id);
  }
};

const [todos, dispatch] = useReducer<Reducer<Array<Todo>, action>>(tasksReducer, []);

useReducer 函数会返回一个数组，第一个元素为一个 state，第二个元素是 dispatch 函数。

第二步，修改之前的事件处理函数：

const changeHandler = (todo: Todo) => {
  dispatch({
    type: 'change',
    ...todo,
  });
};
const deleteHandler = (id: string) => {
  dispatch({
    type: 'delete',
    id: id,
    content: '',
  });
};
const addHandler = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    dispatch({
      type: 'add',
      id: '',
      content: value,
    });
    setValue('');
  }
};

Reducer 和 State 的对比

• 通常情况下，使用 useState 时，一开始只需要编写少量的代码，而 useReducer 必须提前编写 reducer 函数和需要调度的 actions。当多个事件处理器以相似的方式修改 state 时，useReducer 可以减少代码量。
• 当状态更新逻辑足够简单时，useState 可读性良好，但是一旦逻辑变得复杂可读性将会下降，useReducer 允许将状态的更新和事件处理器分离以提高可读性。
• 当使用 state 出现问题时，很难发现具体的原因，使用 reducer 时，可以再 reducer 函数中通过日志等形式可以快速排查问题。
• reducer 是一个不依赖组件的纯函数，所以可以对它单独进行测试。

Reducer 注意事项

• reducer 必须是纯粹的。和状态更新函数类似，reducer 在渲染时运行，它不应该包含异步请求、定时器或者任何副作用，应该以不可变值的方式去更新对象和数组。
• 每个 action 都描述了一个单一的用户交互，即使它会引发数据的多个变化。例如，如果是更新表单数据，应该一次性 dispatch 一个对象而不是分多次 dispatch。