Loading

Redux

Redux 基本介绍

Redux本身是零依赖的,可以适用于任何框架,而不仅仅是React。这里以React为例

  1. 单向数据流:从父组件流向子组件,兄弟组件无法共享数据。
    2.state: react中的状态,是只读对象,不可直接修改。
    3.reducer: 基本函数,用于对State的业务处理。
    4.action: 普通对象,用于描述事件行为,改变state。

Redux 工作流

  • Store => Component => Action => Reducer => Store
  • Store是一个 数据源,这个数据源存储State状态,当用户的行为触发某一事件之后会调用Action,Action会调用dispatch 方法,通过dispatch 去触发Reducer,Reducer做中间的处理包装,最后返回一个新的State状态,把这个新的状态存储到Store数据源中去。Component视图订阅了Store数据源,当数据源发生了变化的时候会反向更新组件。

Redux安装

  • yarn add redux --save
  • yarn add react-redux --save

Redux 集承

  • 创建Action模块。
  • 创建Reducer模块。
  • 创建Store模块。
  • 通过connect方法将React组件和Redux连接起来。
  • 添加Repvider作为项目的根组件,用于数据的存储。

Redux调试工具安装

  • 在chrome中安装Redux Devtools 扩展
  • yarn add redux-devtools-extension
posted @ 2019-11-08 21:12  fsdffsdf  阅读(171)  评论(0编辑  收藏  举报