【问题标题】:What is the difference between redux-thunk and redux-promise?redux-thunk 和 redux-promise 有什么区别?
【发布时间】:2016-08-03 07:35:09
【问题描述】:

据我所知,如果我错了,请纠正我,redux-thunk 是一个中间件,它可以帮助我们在操作本身中调度异步函数和调试值,而当我使用 redux-promise 时,我无法创建异步函数将我自己的机制实现为 Action 会引发仅调度普通对象的异常。

这两个包之间的主要区别是什么?在单页反应应用程序中使用这两个包或坚持使用 redux-thunk 有什么好处吗?

【问题讨论】:

    标签: reactjs redux redux-thunk redux-promise


    【解决方案1】:

    您可能希望/需要在您的应用中同时使用这两者。 从 redux-promise 开始,用于生成 promise 的日常异步任务,然后随着复杂性的增加扩大规模以添加 Thunks(或 Sagas 等)

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

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

    但请注意,如果您的 Thunk 生成并发送 Promise,那么您需要同时使用这两个库

    • Thunk 将组成原始动作并分派它们
    • 然后redux-promise 将在 reducer 处处理由 Thunk 生成的单个 promise 的解包,以避免需要的样板文件。 (您可以在 Thunks 中使用promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError) 做所有事情……但为什么要这样做?)

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

    • Thunk 用于 Redux 流程的开始:如果您需要创建复杂的操作,或者封装一些粗糙的操作创建 逻辑,将其排除在您的组件之外,并且绝对排除在减速器之外。
    • redux-promiseend 你的流程,一旦一切都归结为简单的承诺,你只想解开它们并将它们的已解决/拒绝值存储在商店中

    注释/参考:

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

    【讨论】:

    • 很好的解释!图书馆的数量之多简直令人沸腾。 :)
    【解决方案2】:

    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 还允许您在一个动作创建者中多次调度。无论您选择一个、另一个或两者都完全取决于您的需求/风格。

    【讨论】:

    • 很好的答案。我可以补充一点,thunk 可以被认为是一个轻量级的承诺。它有助于在管理异步操作时标准化时间。
    • 如果你使用 Promise,你可以使用 async/await 和 action creators
    【解决方案3】:

    完全披露:我对 Redux 开发相对较新,并且自己也在为这个问题苦苦挣扎。我将解释我找到的最简洁的答案:

    ReduxPromise 在分派操作时返回一个 Promise 作为有效负载,然后 ReduxPromise 中间件会解析该 Promise 并将结果传递给 reducer。

    另一方面,ReduxThunk 强制动作创建者推迟将动作对象实际分派给减速器,直到调用分派。

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

    【讨论】:

    • ...有点。这些是实际使用模式的……副作用……。 ReduxPromise 也不会将承诺作为有效负载返回。 ReduxPromise 处理你在promise 有效负载的地方分派的任何动作。
    猜你喜欢
    • 2018-10-21
    • 2016-11-19
    • 2016-08-26
    • 2020-04-17
    • 1970-01-01
    • 2018-05-26
    • 1970-01-01
    • 2022-01-20
    • 2021-04-28
    相关资源
    最近更新 更多