javascript - 接受所有操作的 Redux 中间件和 reducer 之间的区别

Question

在我的 redux 项目中，我想在每个 Action 调度中检查一些东西(例如网络连接)。我是否应该使用一个接受所有类型的 Action (没有类型检查)的 reducer 来实现，如下所示

export default (state = defaultState) => ({
    ...state,
    neworkStatus: navigator.onLine
})

或使用中间件。

const NetworkMiddleware = store => next => (action) => {
    const result = next(action)
    const state = store.getState()
    if (navigator.onLine && !state.NetworkDetector.networkStatus) next({ type: 'NETWORK_SUCCESS' })
    if (!navigator.onLine && state.NetworkDetector.networkStatus) next({ type: 'NETWORK_ERROR' })
    return result
}

export default NetworkMiddleware;

这两个实现有什么区别

Answer 1

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

我认为使用中间件来分析网络事件会更好。阅读这些 Redux docs了解更多信息。