Redux

Redux入门教程(快速上手)

Redux入门示例-TodoList

redux在react中的应用(基础篇)

Redux

Store

store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。

要通过本地或远程组件更改状态,需要分发一个action分发在这里意味着将可执行信息发送到store。当一个store接收到一个action,它将把这个action代理给相关的reducer

维护整个应用的 state;提供 getState() 方法获取 state;提供 dispatch(action) 方法更新 state;通过 subscribe(listener) 注册监听器。createStore是用来创建store的。

Action

action 可以理解为一种指令,store 数据的唯一由来就是 action,action 是一个对象,它需要至少一个属性type。type 是这个对象的唯一标识,其它附属的参数我们称为payload(载荷)。

这个指令由组件触发,然后传到 reducer。

Reducer

reducer 是实现(state, action) -> newState的纯函数。

reducer 是一个包含 switch(action.type) 的函数。该函数需要的参数至少是:当前的state,以及一个action。

拆分reducer是一个编写reducer的最基本方式。拆分规则是跟state的结构紧密相关的。

redux对reducer的合并提供了一些便捷的方法,combineReducers来合并reducer。需要子reducer的名字跟对应要接收的state的key一致。

纯函数

  • 函数的返回结果只依赖于它的参数
  • 函数执行过程里面没有副作用。一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。(1.调用DOM API修改页面;2.发送了ajax请求;3.修改外部变量;4.调用window.reload刷新浏览器;5.console.log往控制台打印数据)

Provider

Provider 其实就是一个中间件,用来实现store的全局访问,他是在原有 App Container 上面再包一层,他的作用就是接收 store 里面的 store 作为 props,将store放在context里,给下面的connect用的。原理就是使用react的context,context是可以实现跨组件传递。

Connect

用来针对某个展示组件,创建包裹这个组件的容器组件

export default connect(mapStateToProps,mapDispatchToProps)(Index)

mapStateToProps中传入的state就是整个应用的state,mapDispatchToProps中传入的dispatch就是store的dispatch!同样的,需要哪些state,就在mapStateToProps里return,需要哪些handler就在mapDispatchToProps里return

Connect:1.这个组件需要获取哪些state;    2.需要dispatch哪些action。

middleware

middleware提供的是位于 action 被发起之后,到达 reducer 之前的扩展点。

异步操作比较常用,例如从服务器拉取数据。