redux入门

Posted 2020-10-14 张若昀的小迷妹

一、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