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


92

据我所知并纠正我是否有错,redux-thunk是一个中间件,可以帮助我们在操作本身中调度异步函数和调试值,而当我使用redux-promise时,如果不实现自己的方法就无法创建异步函数作为Action的机制抛出仅分配纯对象的异常。

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

Answers:


119

redux-thunk 允许您的动作创建者返回一个函数:

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

redux-promise 允许他们返回承诺:

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

如果您需要异步或有条件地分派动作,则这两个库都很有用。redux-thunk还可以让您在一个动作创建者内分派几次。您选择一个,另一个还是全部取决于您的需求/风格。


1
好答案。我可能会补充说,可以认为打手是轻巧的承诺。在管理异步操作时,它有助于规范时间。
马特·卡特里耶

4
如果您使用诺言,则可以与动作创建者一起使用async / await
robbie's

79

您可能会希望/同时在应用程序中同时需要两者。从redux-promise开始执行常规的产生诺言的异步任务,然后随着复杂性的增加而扩展以添加Thunk(或Sagas等)

  • 当生活简单时,您只需要与返回一个承诺的创建者进行基本的异步工作,即可redux-promise改善您的生活,并轻松快捷地简化生活。(简而言之,redux-promise(-middleware)无需考虑在诺言解决时“解开”诺言,然后编写/分发结果,而是为您处理所有无聊的工作。)
  • 但是,在以下情况下,生活变得更加复杂:
    • 也许您的动作创建者想要产生多个诺言,您希望将它们作为单独的动作分派给单独的减速器?
    • 或者,在决定如何以及在何处分发结果之前,您需要管理一些复杂的预处理和条件逻辑?

在这些情况下,的好处redux-thunk是它允许您将复杂性封装在action-creator内部

但是请注意,如果您的Thunk产生并调度了Promise,那么您将需要同时使用这两个库

  • Thunk会组成原始动作并将其分派
  • redux-promise然后将在解压缩器上处理Thunk生成的各个promise的包装,以避免产生样板。(您可以promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... 在Thunks中做所有事情,但是为什么呢?)

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

  • 恶作剧是Redux流程的开始:如果您需要创建复杂的动作,或者封装一些粗糙的动作创建逻辑,则将其排除在组件之外,当然也应包括在reducers中。
  • redux-promise是为了流程的结束,一旦一切都简化为简单的承诺,而您只想解开它们并将其解决/拒绝的价值存储在商店中

注释/参考:

  • 我发现redux-promise-middleware这是对原始想法背后的想法的更完整和可理解的实现redux-promise。它正在积极开发中,并得到了很好的补充redux-promise-reducer
  • 还有其他类似的中间件可用于组合/排序复杂的动作:一个非常流行的中间件是redux-saga,它与极为相似redux-thunk,但是基于生成器函数的语法。同样,您可能会结合使用它redux-promise
  • 这是一篇很棒的文章,直接比较了各种异步合成选项,包括thunk和redux-promise-middleware。(TL; DR:“与其他一些选择相比,Redux Promise中间件大大减少了样板” …… “我认为我喜欢Saga用于更复杂的应用程序(请阅读:“用途”),而Redux Promise中间件则可以用于其他所有方面。”
  • 请注意,在一个重要的情况下,您可能认为您需要调度多个动作,但实际上并不需要,并且可以使简单的事情保持简单。那就是您只希望多个reducer对您的异步调用做出反应的地方。但是,根本没有理由为什么多个reducer无法监视单个动作类型。您只想确保您的团队知道您正在使用该约定,因此他们不认为只有一个reducer(具有相关名称)可以处理给定的操作。

4
很好的解释!庞大的图书馆只是沸腾了。:)
AnBisw

22

全面披露:我对Redux开发还比较陌生,我自己也很困惑这个问题。我将解释我找到的最简洁的答案:

当调度动作时,ReduxPromise返回一个Promise作为有效负载,然后ReduxPromise中间件工作以解析该Promise并将结果传递给reducer。

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

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


5
... 有点。这些都是使用的实际模式的副作用。ReduxPromise也不会将诺言作为有效载荷返回。ReduxPromise 处理在诺言有效负载的情况下分派的所有操作。
XML
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.