Redux 中间件在 next() 之前更改状态

Question

我想在调用next() 之前修改状态，以便在中间件获得新状态之后应用的每个reducer。 有可能吗？怎么样？

我想到的唯一想法很老套，应该是这样的：

export const myMiddleware = (store) => (next) => (action) => {
    const oldReducer = ????
    store.replaceReducer(myReducer);
    store.dispatch(action);
    const newState = store.getState();
    store.replaceReducer(oldReducer);
    return next(newState);
}

由于我没有看到任何获取当前reducer的方法，所以应该以任何方式将其提供给中间件：

export const myMiddleware = (oldReducer) => (store) => (next) => (action) => {
   ...
}

const store = createStore(originalReducer, applyMiddleware(myMiddleware(originalReducer)));

这似乎更骇人听闻！

主要目的是构建一个包，映射一个动作对象 (action.payload) 和存储 state 中的一个路径 (action.meta)。在这种情况下，reducer 分布在一个 npm 包中，因此应该以某种方式“链接”它。所以现在reducer正在检测payload中是否有路径和对象，并尝试从中减少新的状态。

最糟糕的解决方案是指示用户从他们自己的reducer 调用reducer，就在reducer 内部的任何其他操作之前。这不是一个固定的模式。所以起初，我在想一个尽可能不可知的中间件，它可以自动完成工作。这就是为什么我尽可能尝试从中间件修改状态。

Answer 1

您可能不想从中间件中调用单个 reducer。听起来您正在将应该是多个顺序操作的内容压缩为单个操作，这就是导致您出现问题的原因。如果您使用 redux-saga 之类的东西来管理操作链，您可能会很容易地完成您正在寻找的东西。

这是一个使用 redux-saga 管理一系列动作的基本示例：

import { takeEvery } from 'redux-saga'
import { put } from 'redux-saga/effects'

export function * watchForSomeAction () {
  // Every time SOME_ACTION is dispatched, doSomethingElse() will be called
  // with the action as its argument
  yield * takeEvery('SOME_ACTION', doSomethingElse)
}

export function * doSomethingElse (action) {
  // put() is redux-saga's way of dispatching actions
  yield put({ type: 'ANOTHER_ACTION', payload: action.payload })
}

这个例子只是监视SOME_ACTION，当它发生时，它调度ANOTHER_ACTION。通过这样的方式，您可以确保 ANOTHER_ACTION 的减速器正在处理由 SOME_ACTION 的减速器产生的新状态。