冗余中间件操作的功能是什么

Question

Redux 中的中间件由签名定义

const middleware = store => next => action => {}

行动的定义是什么，它们应该如何创建？

我想创建一个新的中间件来处理异步操作，其中操作可以包含要消除副作用的指令，也可以包含成功时调度的操作。我按如下方式设置了中间件：

const effectMiddleware = store => next => async (action) => {
// Assert it's actually a command
if (action.command !== undefined) {
next(action)
const result = await Cmd.execute(action.command) // returns a redux action
return store.dispatch(result)
else {
next(action)
}
}

但是，我遇到了奇怪的错误，无法执行下一个操作。我发现实际上中间件"操作"与您在应用程序中定义的操作不同。使用控制台日志，我发现中间件中的操作实际上是

action: Object { type: "MY_ACTION", payload: {} }
​
stack: undefined
​
timestamp: 1571214156244
​
type: "PERFORM_ACTION"

因此，为什么它没有执行 Cmd.execute 返回的操作。我设法通过创建一个 wrapAction 函数来解决这个问题：

const wrapAction = (action) =>
({ action: action, type: "PERFORM_ACTION", stack: undefined, timestamp: new Date().valueOf() })
const effectMiddleware = store => next => async (action) => {
// Assert it's actually a command
if (action.action.command !== undefined) {
next(action)
const result = await Cmd.execute(action.action.command) // Cmd.execute returns a Promise<redux action>
return store.dispatch(wrapAction(result))
else {
next(action)
}
}

但是，我在任何地方都找不到这方面的文档，所以我的问题是：中间件实际上是如何使用的？将操作"包装"到这些中间件操作中的官方方法是什么？

Answer 1

发生这种情况的原因是因为 redux devtools！当您使用多个中间件时，redux devtools 始终需要排在最后。