当前位置 : 主页 > 网页制作 > React >

redux和react-redux

来源:互联网 收集:自由互联 发布时间:2021-06-15
redux和react-redux的关系: redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react-redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充

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更新会触发---首次不更新不触发,导致影响首次渲染

    两种方法可以结合使用
网友评论