基本使用

  1. const [state, dispatch] = useReducer(reducer, initialArg, init);

它接收一个形如 (state, action) => newState 的 reducer，和初始的state值
并返回当前的 state 以及与其配套的 dispatch 方法。

  1. 第一个参数 reducer 显然是必须的，它的形式跟 Redux 中的 Reducer 函数完全一致，即 (state, action) => newState。
  2. 第二个参数 initialArg 就是状态的初始值。
  3. 第三个参数 init 是一个可选的用于懒初始化（Lazy Initialization）的函数，这个函数返回初始化后的状态。
  1. import React, { useReducer } from "react";
  2. import "./style.css";
  4. //定义初始state
  5. const initialTodos = [
  6.   {
  7.     id: "a",
  8.     task: "Learn React",
  9.     complete: false
  10.   },
  11.   {
  12.     id: "b",
  13.     task: "Learn Firebase",
  14.     complete: true
  15.   }
  16. ];
  18. //定义reducer
  19. const todoReducer = (state, action) => {
  20.   switch (action.type) {
  21.     case "DO_TODO":
  22.       return state.map(todo => {
  23.         if (todo.id === action.id) {
  24.           return { ...todo, complete: true };
  25.         } else {
  26.           return todo;
  27.         }
  28.       });
  29.     case "UNDO_TODO":
  30.       return state.map(todo => {
  31.         if (todo.id === action.id) {
  32.           return { ...todo, complete: false };
  33.         } else {
  34.           return todo;
  35.         }
  36.       });
  37.     default:
  38.       return state;
  39.   }
  40. };
  42. const App = () => {
  43.   //初始的todos是initialTodos
  44.   const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);
  45.   const handleChange = todo => {
  46.     dispatch({ type: todo.complete ? "UNDO_TODO" : "DO_TODO", id: todo.id });
  47.   };
  49.   return (
  50.     <ul>
  51.       {todos.map(todo => (
  52.         <li key={todo.id}>
  53.           <label>
  54.             <input
  55.               type="checkbox"
  56.               checked={todo.complete}
  57.               onChange={() => handleChange(todo)}
  58.             />
  59.             {todo.task}
  60.           </label>
  61.         </li>
  62.       ))}
  63.     </ul>
  64.   );
  65. };
  67. export default App;
  • 定义reducer
  • 初始化useReducer
  • 根据业务需要 dispatch对应的action，{ type: todo.complete ? “UNDO_TODO” : “DO_TODO”, id: todo.id }就是一个action

通过源码分析，Hooks源码可以看到，useState其实是一种阉割版的useReducer
那么，我们什么时候用state，什么时候用recuder呢？

useReducer 和 useState 的使用目的几乎是一样的：定义状态和修改状态的逻辑。useReducer 使用起来较为繁琐，但如果你的状态管理出现了至少一个以下所列举的问题：

  • 需要维护的状态本身比较复杂，多个状态之间相互依赖
  • 修改状态的过程比较复杂

Reference

https://www.robinwieruch.de/react-usereducer-hook