带你入门Redux的工作流

redux 工作原理图

工作流概述：React 组件 将想要发出的动作告知 action 制造厂 经过其包装成object形式 分发到 Store 由其进行接下来的流程调度将 上一个状态State和action对象 传递给Reducers（工作车间） 由Reducers开始行动，获得新的State反馈给Store进行存储。数据更新完成，React组件拿取新的数据。

工作流程细化

Store

Store 是redux工作流中的核心人物 我们可以发现Store和其他三个部分都有交流通道，如果我们将Store去掉，整个流程将彻底崩塌。Store可以理解是全局的调度者，也是我们数据集中存储的位置。

Store 通过相应的Api将它存储的数据暴露给React组件

Store将上一个阶段的工作状态和经过action制造厂包装成的action对象传递给Reducers

action 制造厂

顾名思义 制造action对象的地方。当React组件将自己想要做的事情（通常是以字符串形式）告诉action制造厂，经过action 制造厂包装成 {type: 'xxxtype', data: 'xxxdata'} 形式的object对象，经过dispatch分发给Store，由Store进行下一步。

action制造厂只是对动作进行包装，这个时候动作还没有发生，换句话说动作并不是由它来做，它只是进行简单的格式包装。

React 组件

组件可以理解是我们顾客 我们需要询问他的想法，再根据它的想法来进行流程。

React 组件通过store.getState()方法来获取集中管理下的数据。

在React中我们将state的声明放在组件的内部，当需要对state进行更改的时候我们可以通过直接调用setState()方法来修改状态。

但是我们使用redux是做的集中状态管理，更好的实现跨组件的数据互通，这个时候我们就不能将共有数据放在某一个组件内部。我们需要放在store中，按照redux的工作流来进行state的更新替换。

Reducers

Reducers 是动作最终发生的位置。

通过Store传递过来的preState和action reducer 经过特殊定义的流程给予不同的newState。

如果学过useReducer可以对其有很好的了解。

最后郑重强调 reducer 是纯函数 ！！！

纯函数： 任何时刻相同的输入永远返回相同的输出结果。

1. 不修改函数的参数
2. 不依赖外部环境状态
3. 无任何副作用

为什么是纯函数呢？

因为redux比较的是preState和newState的地址，如果改变了参数，没有产生新的对象，而是在原来的基础上修改的话，redux无法知道，将直接返回preState，页面不会产生任何变化。