集中管理状态的容器--redux

123 阅读1分钟

使用redux的一个小demo,源码地址:flaChang/redux-demo-1 (github.com)

redux常见概念及它们的作用

state 全局的状态

store 仓库,存储state

connect react-redux提供的一个高阶组件,作用是将组件和state连接起来。是一个封装读和写的高阶组件

connect(MapStateToProps,MapDispatchToProps)(ReactComponents)

connect可以调用两次,首先调用得到并封装读写接口,在恰当的时候调用update来更新组件,之后再次调用将读写接口传给组件。

state和dispatch 组件属性中的读写api,读使用state,写使用dispatch。可以通过传selectorMapDispatchToProps来更精确地实现读写。

reducer 规范创建state的过程。每次是通过创建新的state来实现state的更新的。

initState 初始的state

action 变化的描述,包括typepayload等参数。

中间件midware

一个midware就是一个函数,它会去修改dispatch

redux-thunk以及redux-promise

createStore中传入第三个参数,即为中间件。applyMiddleware(reduxThunk,reduxPromise)

redux-thunk

改写dispatch方法,如果action是一个函数,就调用它。否则就传给下一个中间件。

redux-promise

改写dispatch方法,如果action.payload的类型是promise对象,就在其后加入then方法。