Redux的工作流程

• 概念

  • Redux 是一个 数据管理中心，可以把它理解为一个全局的 data store 实例。它通过一定的使用规则和限制，保证着数据的健壮性、可追溯和可预测性。它与 React 无关，可以独立运行于任何 JavaScript 环境中，从而也为同构应用提供了更好的数据同步通道。

• 核心理念

  • 单一数据源

    • 整个应用只有唯一的状态树，也就是所有 state 最终维护在一个根级 Store 中；

  • 状态只读

    • 为了保证状态的可控性，最好的方式就是监控状态的变化。那这里就两个必要条件：

      • Redux Store 中的数据无法被直接修改；

      • 严格控制修改的执行

  • 纯函数

    • 规定只能通过一个纯函数 (Reducer) 来描述修改

• 实现

  • Store ：保存数据的地方，你可以把它看成一个容器，整个应用只能由一个Store
    • 提供 getState() ⽅法获取 state；
    • 提供 dispatch(action) ⽅法更新 state；
    • 通过 subscribe(listener) 注册监听器;
    • 通过 subscribe(listener) 返回的函数注销监听器。
  • State:Store对象包含所有数据，如果想得到某个时点的数据，就要对Store生成快照，这种时点的数据集合，就叫做State
  • Reducer：Store收到Action以后，必须给出一个新的State,这样View才会发生变化。这种State的计算过程就叫做Reducer。Reducer是一个函数，他接受Action和当前State作为参数，返回一个新的State。
  • Action：State的变化，会导致View的变化。但是，用户接触不到State,只能接触到view。所以，State的变化必须由View导致的。Action就是View发出的通知，表示State应该要发生变化了。
  • dispatch:是View发出Action的唯一方法。

  然后我们过下整个工作流程：

  用户通过一些事件（如点击按钮，移动鼠标）就会通过dispatch向reducer派发一个action，reducer接收到action后就会去更新state，组件内部就可以通过getState()获取store中的state的值来刷新视图。