redux和react-redux

Posted 2020-11-13 twizcl

redux和react-redux的关系：

redux是react的状态管理工具，却不仅仅只是为了react而生的，所以在使用中会存在痛点。而react-redux是专门为了react定制，目的是为了解决redux的痛点，起到了补充的作用。

redux和flux思想：

从代码层面而言，flux无非就是一个常见的event dispatcher，其目的是要将以往MVC中各个View组件内的controller代码片断提取出来放到更加恰当的地方进行集中化管理，并从开发体验上实现了舒适清爽、容易驾驭的“单向流”模式。

但为了区分于以往的MVC模式，并向facebook的贡献表达敬意，后面我们将把这种优化后的 Model-View-Controller 开发模式在React背景下正式称为Flux模式。

redux 的核心概念：

• 在顶层组件创建一个store(状态实例)，底层组件通过props共享这个store。
• 数据流动的方向：
  component->action->reducer->state->component
  component: 展示结果(含处理结果代码)
  action: 转发的动作,异步请求，
  reducer: 业务处理逻辑,copy+更新 + 返回(return)新state
  state: 状态收集，更新内部state状态，更新订阅(store.subscribe)state的组件（component）
• 更改state:
  component-->dispatch(action)-->reducer

• 获取state：
  store.getState() 抓state状态---只能抓取一次
  store.subscribe() 订阅---state更新会触发---首次不更新不触发，导致影响首次渲染

    两种方法可以结合使用