只包括主要API,欢迎指正!
首先按库react-redux、redux两个库分有如下API
react-redux主要包括两个:
- Provider
<Provider store>
用法:<Provider store>
使组件层级中的 connect()
方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider>
中才能使用connect()
方法。
实现方式:把store放到content上
- connect
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
用法:连接 React 组件
与Redux store
。连接操作不会改变原来的组件类。返回一个新的已与Redux store
连接的组件类。
mapStateToProps
: 将从content
拿到的state
放到props
上mapDispatchToProps
:
将dispatch
绑定到props
上,一般是绑定到action
上,这样写action
不用手动dispatch
mergeProps
:如果指定这个参数将拿到执行的结果
redux主要包括:
action
: 所有操作的集合dispatch
: 推送action到createStorecreateStore
: 提供了获取state和dispatch方法,middleWare
的执行也在这个阶段middleware
: 提供了dispatch过程的中间操作,所有的dispatch操作都会经过中间件
常见中间件写法
function logger({ getState }) {
return (next) => (action) => {
console.log('will dispatch', action)
// 调用 middleware 链中下一个 middleware 的 dispatch。
let returnValue = next(action)
console.log('state after dispatch', getState())
// 一般会是 action 本身,除非
// 后面的 middleware 修改了它。
return returnValue
}
}
中间件是一个嵌套了多层的高阶函数,分别接受getState next action,返回next(action)
monkeypatch写法
function logger(store) {
let next = store.dispatch
// Previously:
// store.dispatch = function dispatchAndLog(action) {
return function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
}
applyMiddleware简单实现
function applyMiddlewareByMonkeypatching(store, middlewares) {
middlewares = middlewares.slice()
middlewares.reverse()
// Transform dispatch function with each middleware.
middlewares.forEach(middleware =>
// 由于每次middle会直接返回返回函数,然后在这里赋值给store.dispatch,
、、 下一个middle在一开始的时候,就可以通过store.dispatch拿到上一个dispatch函数
store.dispatch = middleware(store)
)
}