Reducer的理解--React状态管理Reducer

这篇博客主要从以下几个方面来介绍我对Reducer的理解

1. 什么是 Reducer 函数
2. useState 重构成 useReducer
3. 使用Reducer的业务场景

1. 什么是 Reducer 函数

对于组件过于分散的事件处理程序，可以将组件的所有状态更新整合到一个外部函数中，这个函数被称为 reducer

reducer管理状态是通过事件处理程序dispatch一个action来指明“用户刚刚做了什么”，传递给dispatch的对象叫“action”

2.在组件中使用reducer

具体的例子可以从下面的链接中学习如何在组件中应用。
如何在组件中具体使用reducer

3. 对比usestate和useReducer

接下来会从几个方面来比较这两个的区别

• 代码体积
  在使用useState时，在最初只需要编写少量代码，而在useReducer中必须提前编写reducer函数和需要调度的actions但是当多个事件处理程序以相似的方式修改state时，useReducer可以减少代码量
• 可读性
  在代码逻辑足够简单时，useState的可读性还可以。但是当逻辑变的复杂起来之后，他们会使组件变得臃肿，不易阅读。在这种情况下，useReducer允许将状态更新逻辑和事件处理分离开
• 可调试性
  当使用useState出现问题时，较难发现具体原因。使用useReducer时，可以在reducer中打印日志来看每个状态的更新，更便于执行更多的代码
• 可测试性
  reducer是一个不依赖于组件的纯函数。这就意味着可以单独对它进行测试。可以针对特定的初始状态和action，断言reducer返回的特定状态。

建议：
如果在修改某些组件状态时经常出现问题或想要添加更多的逻辑时，建议使用Reducer。

4. 如何编写一个好的reducers

有两点需要牢记

• reducers必须时纯粹的
  reducers是在渲染时运行的（actions会排队知道下一次渲染），这就意味着reducer必须纯净，即当输入相同时，输出也应是相同的。它不应包含异步请求，定时器或任何副作用。应该以不可变值的方式更新对象和数组
• 每个action都描述了一个单一的用户交互，即使它会引发数据的多个变化