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

Posted 2023-03-07

【中文标题】Redux 中间件和reducer 之间的区别接受所有操作

【英文标题】：Difference Between a Redux middleware and reducer accepting all actions

【发布时间】：2018-03-27 22:08:26

【问题描述】：

在我的 redux 项目中，我想在每个动作调度中检查一些东西（例如网络连接）。我是否应该使用接受所有类型的操作（不进行类型检查）的减速器来实现，如下所示

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;

这两种实现有什么区别

【参考方案1】：

它在调度一个 动作，以及它到达减速器的那一刻。人们使用 Redux 用于记录、崩溃报告、与异步通信的中间件 API、路由等。

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

【参考方案2】：

redux 中的中间件在进入 reducer 更新状态之前会拦截动作并执行一些特定的活动。中间件旨在执行此类操作，而无需更改存储中的状态。如果您通过编写 reducer 来执行此类跟踪或修改，您最终会在 store 中为此活动维护一个状态，这可能与您的组件更新或重新渲染无关。我认为这不是一个好习惯，也不符合框架设计。所以最好通过中间件来实现。

【讨论】：

是的，我认为这就是重点：中间件不打算在 state-change-history 中留下一步。