欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

redux和react-redux

程序员文章站 2022-04-03 16:43:36
redux和react redux的关系: redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充的作用。 redux和flux思想: 从代码层面而言,flux无非就 ......

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

      两种方法可以结合使用