一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情

react-redux这个库是如何工作的

概念：

Provider

Provider 的作⽤是从最外部封装了整个应⽤，并向 connect 模块传递 store

connect

负责将 React 和 Redux 关联起来，它的作用主要如下：

获取 state：connect 先通过 context 来获取存放在 Provider 中的 store，然后通过 store.getState() 来获取整个 store tree 上所存放的 state
包装原组件：connect 将 state 和 action 通过 props 传⼊到原组件的内部，并调用 wrapWithConnect 函数来包装和返回⼀个 Connect 对象，Connect 对象重新 render 外部传⼊的原组件，并把 connect 中传⼊的 mapStateToProps 和 mapDispatchToProps 与组件原有的 props 合并后，通过属性的⽅式传给包装组件
监听 store tree 变化：connect 缓存了 store tree 中 state 的状态，通过对比当前 state 和变更前 state，确定是否需要调⽤ this.setState() ⽅法，以此触发 Connect 及其⼦组件的重新渲染

Redux的工作流程

概念：

Store：一个保存数据的容器，整个应⽤只有⼀个 Store
State：Store 对象内包含所有数据，如想得到某一时间点的数据，就要对 Store ⽣成快照，这种时间点的数据集合，就叫 State
Action：State 的变化会导致 View 的变化，但⽤户是接触不到 State 的，只能接触到 View，所以 State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发⽣变化了
Action Creator：View 要发送多少种消息，就需要有多少种 Action，如果都⼿写会比较麻烦，因此我们通常会定义一个用于生成 Action 的函数，该函数就被称为 Action Creator
Reducer：在 Store 收到 Action 以后，必须给出⼀个新的 State，这样 View 才会发⽣变化。这种 State 的计算过程就叫做Reducer。Reducer 是⼀个函数，它接收 Action 和当前 State 作为参数，返回值是⼀个新的 State
dispatch：是 View 发送 Action 的唯⼀⽅法

工作流程：

⼀次⽤户交互的流程如下：

注意，在整个流程中，数据都是单向流动的，我们称之为单向数据流，这种⽅式可以保证流程的清晰性。