导航
导航
文章目录
  1. 数组中的 reducer 方法
  2. redux 中的 reducer
  3. react hook 中的 useReducer
  4. reducer 其他应用
  5. 总结

JavaScript 中的 reducer

很长一段时间一直对 reducer 不太理解,reduce 英文含义 “减少”,reducer 可以翻译成“缩减器”,但感觉还是不直观。 直到今天,看到一个函数,豁然开朗:

const uniqueKey = new Set(obj.reduce((acc, { key }) => [...acc, key], []));

这个函数的作用是将一个数组对象元素中的 key 都找出来,然后去重,返回的是 Set 类型的数据。

数组中的 reducer 方法

上个函数是数组中 reduce 用法,

arr.reduce(callback( accumulator, currentValue, [, index[, array]] ) [, initialValue])

Your reducer (callback) function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

重要信息:

  1. 每次 callback function,即 reducer function 返回值都赋值给了 accumulator
  2. accumulator 在每次循环中会记录下来
  3. 循环结束,accumulator 作为最终值被返回

关于 initialValue

  1. 如果提供 initalValue,第一次循环时,accumulator 值为 initialValue,currentValue 为数组第一个元素(同时 index 为 0);
  2. 如果不提供 initalValue,第一次循环时,accumulator 值为数组第一个元素,currentValue 为数组第二个元素(同时 index 为 1,index 始终为 currentValue 的 index)。

如果是空数组,不提供 initialValue 会报错。

至此,可以得出结论:reducer 函数的直观理解是 将多个值(或者对值可能产生的副作用)通过压缩(减少)处理,返回一个

比如,数组中 reduce 方法可以理解成:

数组(多个值)-- reducer 函数 --> 单个值

redux 中的 reducer

redux 中也有 reducer,他的作用也能直观理解成 将多个值(或者对值可能产生的副作用)通过压缩(减少)处理,返回一个,reducer 接收 state 以及 action(对 state 产生副作用),然后(压缩 preState 和 action)返回新的 state,简单流程是这样:

preState + action -- reducer 函数 --> newState

参考问题 Why are Redux’s state functions called reducers?

react hook 中的 useReducer

react hook 有一个 useReducer,它可以接收一个 reducer 函数,这里的 reducer 函数和 redux 中含义一直:接收 state 和 action,返回新的 state。

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

reducer 其他应用

比如数组去重

const uniqueArr = arr.reduce((acc, cur) => {
console.log(acc, cur, acc.indexOf(cur) === -1);
return acc.indexOf(cur) === -1 ? acc.concat(cur) : acc;
}, []); // 设置初始值,避免数组为空时报错

总结

reducer 函数的直观理解是 将多个值(或者对值可能产生的副作用)通过压缩(减少)处理,返回一个