React useReducer 使用及 useImmerReducer

本文主要是介绍React useReducer 使用及 useImmerReducer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

useReducer 实际上是以数组上的 reduce() 方法命名的。
传递给 reduce 的函数被称为 “reducer”。它接受目前的结果和当前的值，然后返回下一个结果。
React 中的 reducer 和这个是一样的：它们都接受目前的状态和 action ，然后返回下一个状态。

reduce

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((result, number) => result + number
); // 1 + 2 + 3 + 4 + 5

useReducer

// 定义 reducer
const reducer = (state, action){const { type, payload } = action// case 块包装到 { } 花括号中，这样在不同 case 中声明的变量就不会互相冲突。// case 通常应该以 return 或 break 结尾，避免代码进入 到下一个 case！switch(type){case 'add': {return state + payload.num}case 'substract': {return state - payload.num}default: {throw Error('未知 action: ' + action.type);}}
}// 声明 useReducer
const [tasks, dispatch] = useReducer(reducer, 0);// 使用 useReducer
function handleAddTask(text) {dispatch({type: 'add',payload: {num: 100}});
}

useReduce 同 useState一样，返回的state是不能直接修改的，而 Immer 提供了一种特殊的 draft 对象，你可以通过它安全的修改 state。在底层，Immer 会基于当前 state 创建一个副本。

useImmerReducer

// 引入
import { useImmerReducer } from 'use-immer';
// 声明
const initialTasks = [{id: 0, text: '参观卡夫卡博物馆', done: true},{id: 1, text: '看木偶戏', done: false},{id: 2, text: '打卡列侬墙', done: false},
];
const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);
// 定义 reducer
function tasksReducer(draft, action) {switch (action.type) {case 'added': {draft.push({id: action.id,text: action.text,done: false,});break;}case 'changed': {const index = draft.findIndex((t) => t.id === action.task.id);draft[index] = action.task;break;}case 'deleted': {return draft.filter((t) => t.id !== action.id);}default: {throw Error('未知 action：' + action.type);}}
}
// 使用 useReducer
function handleAddTask(text) {dispatch({type: 'added',id: nextId++,text: text,});}