react-redux/redux相关API,用法原理

1,029 阅读1分钟

只包括主要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放到propsmapDispatchToProps: 将dispatch绑定到props上,一般是绑定到action上,这样写action不用手动dispatch
mergeProps:如果指定这个参数将拿到执行的结果

redux主要包括:

  • action: 所有操作的集合
  • dispatch: 推送action到createStore
  • createStore: 提供了获取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)
  )
}