redux-thunk 和 redux-promise 有什么区别？

Question

据我所知，如果我错了请纠正我，redux-thunk is a middleware which helps us dispatch async function and debug values in the action itself while when I used redux-promise我无法在不实现我自己的机制的情况下创建异步函数，因为 Action 会抛出仅调度普通对象的异常。

这两个软件包之间的主要区别是什么？在单页 React 应用程序中同时使用这两个包或坚持使用 redux-thunk 是否有任何好处就足够了？

Answer 1

redux-thunk 允许您的动作创建者 return 一个函数：

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise 允许他们 return 一个承诺 :

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

如果您需要异步或有条件地分派操作，这两个库都很有用。 redux-thunk 还允许您在一个动作创建者中分派多次。选择一个、另一个还是两者都完全取决于您的 needs/style.

Answer 2

您很可能 want/need 在您的应用中同时使用这两者。 从 redux-promise 开始，用于常规的 promise 生成异步任务，然后随着复杂性的增加向上扩展以添加 Thunk（或 Sagas 等）：

如果生活很简单，而您只是与 return 一个承诺的创作者进行基本的异步工作，那么 redux-promise 将改善您的生活并简化生活，快速而轻松。（简而言之，您不需要考虑 'unwrapping' 您的承诺，然后 writing/dispatching 结果，redux-promise(-middleware) 会为您处理所有这些无聊的事情。）
但是，当出现以下情况时，生活会变得更加复杂：
- 也许您的 action creator 想要产生多个 promise，您希望将它们作为单独的 action 分派给单独的 reducer？
- 或者，在决定如何以及在何处发送结果之前，您需要管理一些复杂的预处理和条件逻辑？

在这些情况下，redux-thunk 的好处是它允许您将复杂性封装在动作创建器中。

但请注意，如果您的 Thunk 生成并分发 promise，那么您需要同时使用这两个库：

Thunk 会编写原始动作并发送它们
redux-promise 然后将在 reducer 处处理由您的 Thunk 生成的单个 promise 的解包，以避免随之而来的样板文件。（你可以而不是在 Thunks 中做所有事情， promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... 但你为什么要这么做？）

另一种总结用例差异的简单方法：Redux 操作周期的开始与结束：

Thunk 用于 Redux 流程的开始：如果您需要创建一个复杂的动作，或者封装一些粗糙的动作创建逻辑，让它远离你的组件，绝对远离减速器。
redux-promise 用于 end 你的流程，一旦一切都归结为简单的承诺，你只想打开它们并将它们的 resolved/rejected 值存储在商店中

NOTES/REFS:

我发现 redux-promise-middleware 是对原始 redux-promise 背后想法的更完整和更易于理解的实现。它正在积极开发中，并且 redux-promise-reducer 也得到了很好的补充。
还有其他类似的中间件可用于 composing/sequencing 您的复杂操作：一个非常流行的中间件是 redux-saga，它与 redux-thunk 非常相似，但基于以下语法生成器函数。同样，您可能会将其与 redux-promise.
这里是 great article 直接比较各种异步组合选项，包括 thunk 和 redux-promise-middleware。（TL;DR："Redux Promise Middleware reduces boilerplate pretty dramatically vs some of the other options" ... "I think I like Saga for more complex applications (read: "使用”），和 Redux Promise 中间件用于其他一切。 ")
请注意，有一种重要情况，您可能认为需要分派多个操作，但实际上不需要，您可以让简单的事情保持简单。这就是您只希望多个 reducer 对您的异步调用做出反应的地方。但是，完全没有理由说明为什么多个 reducer 不能监控单个操作类型。您只是想确保您的团队知道您正在使用该约定，所以他们不要假设只有一个减速器（具有相关名称）可以处理给定的操作。

Answer 3

完全披露：我对 Redux 开发还比较陌生，自己也在为这个问题苦苦挣扎。我将解释我找到的最简洁的答案：

ReduxPromise returns 在分派操作时将承诺作为有效负载，然后 ReduxPromise 中间件会解析该承诺并将结果传递给 reducer。

另一方面，ReduxThunk 强制操作创建者推迟实际将操作对象分派给 reducer，直到调用分派。

这是我在其中找到此信息的教程的 link：https://blog.tighten.co/react-101-part-4-firebase。

redux-thunk 和 redux-promise 有什么区别？

What is the difference between redux-thunk and redux-promise?

reactjs

redux

redux-thunk

redux-promise

NOTES/REFS: