Redux Promise和Redux Promise中间件有什么意义？

Question

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

我设法将注意力集中在Redux的机制上，但是当我谈到API调用和异步操作创建者时，我就​​在Promises的上下文中停留在中间件上。

你能帮我弄好乱子吗？

这个难题的矛盾部分让我头疼：

1. YT教程之一说，本机Redux分派方法不支持从动作创建者返回的诺言-因此需要Redux Promise库（我知道该项目现在可能已经死了，并且继续是Redux Promise中间件）。

2. Dan在“ redux-thunk和redux-promise之间有什么区别？ ”中说，即使没有中间件，我也可以使用诺言-只需在动作创建者中对其进行管理即可。

3. 在其他答案中，我找到了使用thunk的示例，其中动作创建者返回了一个... promise（后来在调用者中处理/ dispatch（myActionCreator（params）.then（...） /所以一个promise 可以由a返回）没有任何redux-promise lib的thunk 。

4. 在“ redux-thunk和redux-promise之间有什么区别？ ”中，接受的答案指出Redux Thunk返回函数，而Redux Promise返回promise ..到底是什么？

总结一下：使用Redux Promise或Redux Promise中间件有什么意义？为什么仅Redux不能原生支持诺言？

更新：

我刚刚意识到，在3点以上我忽略then()被连接到dispatch不包括在dispatch()ARGS。

Answer 1

链接的答案是正确的，但我将尝试进一步解释。

基本的Redux存储将仅接受调度普通对象操作：

store.dispatch({type : "ADD_TODO", text : "Buy milk"});

如果您尝试传递除普通对象操作以外的任何操作，则存储将引发错误：

store.dispatch(() => {});
// Error: "Actions must be plain objects. Use custom middleware for async actions."

中间件形成一个流水线store.dispatch()，每个中间件都可以使用传递给它的任何值来做任何想要的事情dispatch：修改，记录，延迟或分配其他东西。这意味着中间件可以通过拦截值并执行其他操作来“教” dispatch()如何接受不是简单操作对象的内容。

因此，通过拦截函数并调用它（而不是将其传递给化简器）来redux-thunk“教” dispatch如何接受函数。 通过拦截承诺并在承诺解决或拒绝时分派动作来redux-promise“教” dispatch如何接受承诺。

通常，dispatch返回传入的任何操作对象。由于中间件环绕dispatch，它们还可以更改返回的值。 redux-thunk将运行thunk函数，并返回thunk函数返回的所有内容。这样一来，您就可以做一些有用的事情，例如从一个笨拙的人那里返回一个承诺，并从那里进行连锁行为：

dispatch(someThunkReturningAPromise())
    .then(() => {
        // Do more stuff here
    });

有关该主题的更多信息，请参阅有关处理副作用的Redux FAQ条目，以及我的React / Redux链接列表的Redux副作用中的文章。

Answer 2

当您调用动作创建器（动作创建器函数的第一行）时，您将发出 ajax 请求。这是一个将访问 JSON API 的网络请求。

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

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

因此，在我们从操作创建者返回操作后，在未来的某个时刻，我们会从 JSON API 收到响应。

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

无论需要多长时间，当操作出现在减速器内部时，它总是可以从我们的 API 获得我们的数据。

为了让您有更好的想法，我在我自己的一个减速器中添加了一条debugger语句，以便我们可以查看其中的不同值。

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

当我单击“获取评论”按钮时，它调用了操作创建者，并且在“源”选项卡中我立即点击了该debugger语句。

以下证据表明，每当此操作出现在减速器内时，它都会从 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 中间件，我们的应用程序将无法按预期运行。

动作创建器并不是为了支持异步请求而开发的，我不知道这是否是一种疏忽。

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