概念
首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。
曾经有人说过这样一句话。
"如果你不知道是否需要 Redux，那就是不需要它。"
Redux 的创造者 Dan Abramov 又补充了一句。
"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"
哪些情况不用 redux?
- 组件UI层非常简单, 仅仅需要子父传值就可以
- 组件不需要沟通 / 沟通成本不超过两层组件
- 不需要大量的接口交互, 并且没有 WebSocket
- 视图层的数据来源单一
什么时候需要 redux?
- 用户使用方式复杂(大型项目)
- 不同身份的用户权限不同(不同按钮需要通过权限保存, 权限需要本地存储, 请求接口前需要判断用户权限<这里一般是后端做?>)
- 与服务器交互量过大, 或使用 WebSocket
- View 不只需要接口的数据, 还需要其他页面数据(我的列表有一列是 A, A 存的是 id, 需要通过这个 id 去 B 里调展示数据, 类似的操作)
举例:
网易云音乐, 对于当前播放的音乐, 在所有的页面都需要, 因此这里的数据需要存储在 redux 中
使用场景:
- 某个组件的状态需要共享给其他组件(权限, 员工, 类型)
- 一个组件需要更新另一个不相关组件的状态
为什么不使用 dva(redux)?
这里考虑去看一下 hooks + context
使用 redux 会导致代码复杂度直线上升, 代码阅读困难, 并且不正确的使用 redux 会导致页面耦合度过高
react 组件化开发，请尽量保持 高内聚低耦合 的原则。
哪里应该使用 redux?
举个例子:
-
组件: 学习小组
-
父组件: 班级
-
根组件: 学校
-
学习小组内, 我跟别人讲话, 面对面讲话, 这就是 useState
-
班级内: 如果我要跟班级的班主任讲话, 这就是 submit (状态提升)
-
班级内: 我跟别人讲话, 扔了一张小纸条, 这就是 submit → prop
-
学校内: 我跟别的班级别的年级的人讲话, 需要内线电话, 这里就是 redux
如果所有的位置沟通都使用 redux：
同学就在眼前，装作没看见，掏电话给他。但如果每个学校每个班里每个人都这么做的话，不但线路之前互相影响难理清，电信局要处理的数据也会呈指数级增长。
为什么不使用 redux?
不通讯的情况
我现在 班级1 和 班级2 之间不需要通讯, 那么我可以直接把班级抽离出来, 放在另一个学校中.
那我 班级1 需要和 班级2 通讯了怎么办?
从 班级1 扔出来一封信(submit), 雇一个人接收这封信(useState), 把这封信的内容写在黑板上给 班级2 看(props).
好处是什么?
高内聚低耦合
- 班级1 不需要考虑这封信谁接收, 班级1 放在哪个学校都能用
- 班级2 不需要考虑信从哪里来, 只需要看信上的内容做下面的操作, 班级2 放在哪个学校都能用
组件删除
如果我要废除掉一个组件，组件内有没有 Redux 是天差地别的。
无状态组件 / 有状态组件
这个组件如果需要删除，查看引用，确定没有引入直接删除即可
有 Redux 组件
- 先查看注入的
state，查看state的引用，发现没有其他位置引用，删除state - 查看是否注入了
reduce，如有有注入reduce，查看为什么引用，改了什么状态，删除后会不会影响其他组件 - 最后才可以慎重的删除组件
