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

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

然而，我运行陷入奇怪的错误，导致下一个动作无法执行。我发现实际上中间件 "actions" 与您在应用程序中定义的操作不同。使用控制台日志我发现中间件中的操作实际上是

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

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

Answer 1

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

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

What's the functionality of redux middleware actions

asynchronous

middleware

redux