redux 中间件操作的功能是什么答案

【问题标题】：What's the functionality of redux middleware actionsredux 中间件操作的功能是什么
【发布时间】：2019-10-16 08:30:17
【问题描述】：

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)
    }
}

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

【问题讨论】：

标签： asynchronous redux middleware

【解决方案1】：

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

【讨论】：