为什么 dispatch 返回一个没有结果的承诺？ (redux 中间件)

Question

我进入了一个使用 vanilla Redux 和中间件的 React 项目。 它的设置方式如下：

composeEnhancers(applyMiddleware(...middleware.map(f => f(services))))

现在middlware是一个包含函数的中间件数组。 services是一个包含外部服务的对象，这些服务被注入到中间件功能（api 等）中。

有趣的部分是中间件，这里是它的一个示例：

...
const throwErrorFlow = ({ api }) => ({ dispatch, getState }) => next => async (action) => {
  next(action)
  if (action.type === actions.THROW_ERROR) {
    try {
      dispatch(actions.setLoadingSlot({ state: false, context: action.payload.context }))

      const context = getState().ui.context

      const payload = { location: action.payload.location, error: action.payload.error?.stack, context }
      console.log(payload);
      await api.context.throwError(payload)
      dispatch(actions.setErrorModalVisibility({ payload, visibility: true }))
    } catch (error) {
      console.log(error);
    }
  }
}


const middleware = [
  middlwareFunction1,
  middlwareFunction2,
  ...
  throwErrorFlow
]

export default middleware

然后我创建了自己的测试操作，它返回一个测试字符串。 我添加了一个与其余类似的中间件功能。 当从 UI 分派此测试操作并记录其结果时，我得到的是： Promise {<fulfilled>: undefined}

所以我试着放大一点。 我的操作如下：

export const customAction = payload => ({
  type: CUSTOM_ACTION,
  payload: payload,
})

我在中间件中的位置如下：

const customAsyncActionFlow = () => storeAPI => () => action => {
  if (action.type === actions.CUSTOM_ACTION) {
    console.log(action);
    return 'TEST!'
  }
}

const middleware = [
  middlwareFunction1,
  middlwareFunction2,
  ...
  throwErrorFlow,
  customActionFlow 
]

export default middleware

我从 UI 中将其称为：

console.log(dispatch(customAction('Hello World!')));

我的操作已正确记录到控制台，但随后我得到Promise {<fulfilled>: undefined}而不是“TEST.”，所以我删除了所有其他中间件功能，只保留了我的 customActionFlow。 一切都如我所料？ 这个没有结果的 Promise 是从哪里来的，是的，所有其他中间件函数都不返回任何东西。 他们只是修改状态？ 这与这个事实有关吗？ 我该如何“解决”这个问题？

编辑：好的，所以我似乎明白发生了什么。 对于需要与 api 交互的每个操作，都会为该操作编写一个中间件，该中间件将被应用。 最后有 20 个中间件功能，每个功能都以异步操作结束。 我猜我用返回值的测试中间件定义的操作在混合中“丢失”了？ 我仍然不确定为什么我的回归没有任何效果。 有没有办法让我的调度操作专门调用我的测试中间件，同时保持应用所有其他中间件？

Answer 1

哦亲爱的。 虽然这不是您问题的直接答案......

我已经看到“将所有Redux 逻辑编写为自定义中间件”的风格尝试了几次……这是一个坏主意！

它使事情变得非常复杂，并且为各个功能块添加所有这些额外的中间件会增加很多开销，因为它们都必须为每个分派的操作运行检查。

作为 Redux 维护者，我强烈建议寻找更好的方法来组织和定义应用程序逻辑。 有关我们的一般建议，请参阅 Redux 风格指南：

• https://redux.js.org/style-guide/

现在，至于实际问题：

当您调用store.dispatch(someAction)时，默认行为是返回操作对象。

当您编写中间件时，它可以覆盖store.dispatch()的返回值。 一个常见的例子是redux-thunk中间件，它只是return thunkFunction(dispatch, getState) 。 这通常用于让 thunk 返回 promises，以便 UI 知道某些异步逻辑何时完成：

• https://redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components
• https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#thunks-and-promises

在这种情况下，中间件本身被定义为一个async函数，JS 中的每个async函数都会自动返回一个 promise。 因此，链中只有一个async中间件最终会从store.dispatch(anything)返回一个 promise。 （这是不直接在自定义中间件中编写一堆逻辑的另一个原因。）