[前端]三行代码优化项目的redux

1. Redux简介

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

2. 前言

之前项目中出现了闪屏问题，调研之后发现有的开发人员为了复用某些比较复杂的action, 连续dispatch了多个可能会影响到同一个state的action，导致redux中的某些state从0瞬间变成1又瞬间变成2（假设）

3. 项目案例(已代码脱敏)

在项目中我们有两个action同时修改了testData

如上图所示，bug的原因就是当前页面所有订阅了testData的组件出现了中间状态。testDataReset之后 redux中的testData变成null, props传入redux testData的组件立刻rerender, 随后testData又变成fetch之后的值，这个组件再次rerender, 就出现了瞬间的白屏现象

4. 优化逻辑

如果有连续调用的多个action, 并且不关心中间状态，可以用batchActionsDispatchAction来合并action，state状态全部更新后，只进行一次dispatch。不仅解决了bug, 在后续开发里面如果要复用action并且不关心中间状态，还可以调用这个action来优化性能。

5. 核心代码

参考

1. 《深入react技术栈》 -- 陈屹
2. redux.js.org/