使用中间件加强store

Time: 2019-08-18

什么是中间件

redux的插件通常称之为中间件。

中间件并不神奇，因为中间件就是一些函数。下面是个例子：

createStore(reducer, {}, applyMiddleware(logger))

function logger (store) {
  return function (dispatch) {
    return function (action) {
      return dispatch(action)
    }
  }
}

其中logger的定义可以简化为：

const logger = store => dispatch => action => {
  return dispatch(action)
}

这种写法是不断柯里化的过程。

上面其实啥也没做，现在我们来丰富一下这个中间件的功能。

大部分场景里，中间件都是想让dispatch做一些什么事情。

比如：

const logger = store => dispatch => action => {
  console.log('Dispatching:', action.type)
  console.log('Old state:', store.getState())
  var result = dispatch(action)
  console.log('New state:', store.getState())
  return result
}

然后手动分发事件：

store.dispatch({ type: "SAVE" })

输出：

Dispatching: SAVE
Old state: { ... }
New state: { ... }

这是让分发行为前后都输出一些数据。

副作用

store的reducers应当没有副作用的，

TBD.