redux - Redux Promise 和 Redux Promise Middleware 的意义何在？

Question

我搜索了高低，但找不到明确的答案。

我已经设法绕开 Redux 的机制，但是当我谈到 API 调用和异步操作创建者时，我被 Promises 上下文中的中间件所困。

你能帮我把乱七八糟的东西弄好吗？

难题的相互矛盾的部分让我头疼:

YT 教程之一说，原生 Redux 调度方法不支持从 Action 创建者返回的 promise ——因此需要 Redux Promise 库(我知道该项目现在可能已经死了，延续是 Redux Promise 中间件)。

Dan 在“What is the difference between redux-thunk and redux-promise?”中说，即使没有中间件，我也可以使用 Promise——只需在 Action 创建器中管理它们。

在其他答案中，我发现了使用 Action 创建者返回的 thunk 的示例... promise (后来在调用者/dispatch(myActionCreator(params).then(...)/
所以一个 promise 可以由重击返回 没有 任何redux-promise lib ..？

在“What is the difference between redux-thunk and redux-promise? ”中，接受的答案是 Redux Thunk 返回函数，而 Redux Promise 返回 Promise.. 到底是什么？

总结一下:使用 Redux Promise 或 Redux Promise 中间件有什么意义？为什么 Redux 本身不支持 Promise？

更新:

我刚刚意识到在上面的第 3 点我忽略了 then()正在 附至 dispatch而不是 包括在 dispatch()参数。

Answer 1

当您调用 Action 创建者( Action 创建者函数的第一行之一)时，您会发出 ajax 请求。那是一个网络请求，它将到达那个 JSON API。

要理解的关键部分是，当我们发出请求时，我们会进入下一行代码，在其中形成该操作对象并返回它。这两个步骤之间的时间，即发出请求和返回操作之间的时间是瞬时的。

众所周知，每当我们向某个外部 API 发出网络请求时，可能需要一些时间才能得到响应。

因此，在我们从 Action 创建者返回我们的 Action 之后，在 future 的某个时间，我们会从 JSON API 获得响应。

因此，在发出 Ajax 请求和从 Action 创建者返回的 Action 之间可能是瞬时的，但是从 Action 创建者返回的 Action 和收到来自 JSON API 的响应之间的时间可能需要更长的时间。

无论花费多长时间，当 action 出现在 reducer 中时，它总是可以从我们的 API 中获得我们的数据。

为了给你一个更好的主意，我添加了一个 debugger对我自己的 reducer 之一的声明，以便我们可以查看其中的不同值。

import { SAVE_COMMENT, FETCH_COMMENTS } from 'actions/types';

export default function(state = [], action) {
  switch (action.type) {
    case SAVE_COMMENT:
      return [...state, action.payload];
    case FETCH_COMMENTS:
      debugger;
      const comments = action.payload.data.map(comment => comment.name);
      return [...state, ...comments];
    default:
      return state;
  }
}

当我单击 Fetch Comments 按钮时，它调用了 Action 创建者，在我的源选项卡中，我立即点击了 debugger。陈述。

这里有证据表明，每当这个 Action 出现在 reducer 中时，它都会有从 API 获得的响应。



现在，让我们移除 Redux Promise 中间件，看看会发生什么。

中间件:

export default ({ children, initialState = {} }) => {
  const store = createStore(
    reducers,
    initialState,
    applyMiddleware(reduxPromise)
  );

中间件不见了:

export default ({ children, initialState = {} }) => {
  const store = createStore(reducers, initialState, applyMiddleware());

  return <Provider store={store}>{children}</Provider>;
};

这是什么？


payload不是从 JSON API 返回的响应，而是待处理的 Promise ，这意味着我们的请求仍在网络上等待从 JSON API 返回。很明显，如果没有 Redux Promise 中间件，我们的应用程序将无法按预期工作。

Action 创建者不是为了支持异步请求而开发的，称之为疏忽，我不知道。

我们使用像 Redux Promise 这样的中间件来查看即将发送到 reducer 的操作，我们有机会完全延迟、记录、修改或停止操作，并且只有通过这些中间件，我们才能使这些异步请求以这种方式工作我们期望它。我们使用 Redux Promise 是因为我们想要检查从 Action 创建者返回的每个 Action ，如果它包含 API 请求或一些异步请求，我们想要延迟它，这样我们就可以在 Action 继续之前得到响应返回 reducer 。这就是 Redux Promise 为我们所做的。