Flux架构

架构流程图 [非常重要]

一、Redux介绍

基于Flux架构搭建而成的状态管理工具

Redux的使的三原则：

  1. Single Source of Truth(唯一的数据源)
  2. State is read-only(状态是只读的)
  3. Changes are made with pure function(数据的改变必须通过纯函数完成)

文档

  1. 核心概念
  • Store 状态机
  • reducer 负责修改Store数据的方法函数
  • Action 负责描述用户操作需求的对象
  1. {
  2.   type:'increment',  //标志不同的action类型
  3.   payload:'参数'   //参数
  4. }

二、Redux的方法

设计模式 (观察者模式)

  1. reducer

必须是纯函数 ,结果可预测

  • 不能使用Math.random随机数
  • 不能再reducer中发起异步请求
  1. store状态机
  • getState 获取当前store状态值
  • dispatch 派发action给store做不同数据处理
  • subscribe 订阅到store状态机的数据变化，执行其内部的回调
  1. 订阅模式、观察者模式

三、Redux基本使用流程梳理

  1. 安装redux
  1. cnpm i redux -S
  1. 使用createStore方法创建状态机

参考 src/store/index.js

  1. 创建createStore所需要的reducer模块，并按需写逻辑代码

参考 src/reducer/index.js

  1. 在需要使用状态机数据的组件内部，获取并订阅渲染

参考 src/components/Num.js

  • store.getState()
  • store.subscribe()
  • this.state 结合使用
  1. 在需要修改状态机数据的组件内部Btn,派发action
  • store.dispatch({
    type:’自定义的描述’,
    payload:’可选参数’
    })

四、Redux跟React的关系

Redux 与 React ，两者并非强绑定关系 我们可以在普通的html中使用Redux

五、手写Redux

利用的发布订阅模式 在合适的时机收集一些函数 订阅 在合适的时机触发那些收集过来的函数 发布