zoukankan      html  css  js  c++  java
  • redux入门

    一、react做视图层面,redux管理state,两者搭配。redux试图让state的变化变得可预测。

    二、redux三大原则

    1.单一数据源

    整个应用的state被存储在一棵object tree,这个object tree只存在唯一一个store

    2.state是只读的

    唯一改变state的方法是触发action

    3.使用纯函数来执行修改

    reducers接收state和action,返回新state

    二、开发redux应用重要的三件事

    1.代码文件的组织结构

    按功能组织

    每个功能对应一个功能模块,一个文件夹

    每个功能模块包括

      actionTypes.js定义action类型

      actions.js定义action的构造函数

      reducer.js定义这个功能模块如何响应actions.js中定义的动作

      views react组件 视图层

      index.js 把所有角色导入,然后统一导出

    2.确定模块边界

    用index.js做为功能模块对外的接口

    3.store的状态树设计

    一个模块控制一个状态节点

    避免冗余数据

    树形结构扁平 树形结构层次不要太深

    三、redux如何管理state

    注册store tree

    1.redux通过全局唯一的store对象管理项目中的state

    //注册store redux通过全局唯一的store来管理state
    const store = createStore(counter)
    2.通过store注册listener,listener会在store tree每次变更后执行
    //store's listener
    //if store change ,it performance
    store.subscribe(render)
    更新store tree
    1.store调用dispatch,通过action把变更的信息传递给reducer
      //store.dispatch transform change information to reducer
        onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    2.store根据action携带的type在reducer中查询变更具体要执行的方法,执行后返回新的state
    //according to the action.type,store change state,then return
    export default (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1
        case 'DECREMENT':
          return state - 1
        default:
          return state
      }
    }
    3.reducer执行后返回的新状态会更新到store tree中,触发由store.subscribe()注册的所有linstener
    store.subscribe(render)
    store.subscribe(()=>{
      console.log(1);
    })
    四、react-redux
    react-redux只有2个API:Provider connect
    1.Provider
    Provider提供一个顶层容器的作用,实现store的上下文传递。
    2.connect
    connect建立和react的连接
    基础用法:connect(mapStateToProps,mapDispatchToProps,mergeProps,options={});
    常用:export default connect(null,mapDispatchToProps)(AddTodo);
    connect()返回的是Connect组件
    使用connect可以把state和dispatch绑定到react组件,使组件可以访问到redux的数据。
    参考:
    《深入浅出React和Redux》程墨
    https://www.cnblogs.com/hhhyaaon/p/5860159.html
  • 相关阅读:
    hdu 6214 : Smallest Minimum Cut 【网络流】
    hdu 6205: card card card【输入挂】
    UVa 10054 : The Necklace 【欧拉回路】
    hdu 6127 : Hard challenge (2017 多校第七场 1008)(计算几何)
    hdu 6143: Killer Names (2017 多校第八场 1011)
    hdu 6134: Battlestation Operational (2017 多校第八场 1002)【莫比乌斯】
    hdu 4992 Primitive Roots 【求原根模板】
    poj 1284 : Primitive Roots
    codevs 2804 最大最小数质因数
    codevs 2370 小机房的树
  • 原文地址:https://www.cnblogs.com/cdx0/p/redux_base.html
Copyright © 2011-2022 走看看