redux 还原thunk和还原promise之间的区别是什么?

inkz8wg9  于 2023-03-30  发布在  其他
关注(0)|答案(3)|浏览(133)

据我所知,如果我错了,请纠正我,redux-thunk是一个中间件,它可以帮助我们调度异步函数和调试action本身的值,而当我使用redux-promise时,如果没有实现自己的机制,我就无法创建异步函数,因为Action抛出了只调度普通对象的异常。
这两个包之间的主要区别是什么?在一个单页react应用程序中使用这两个包是否有任何好处,或者坚持使用redux-thunk就足够了?

pn9klfpd

pn9klfpd1#

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

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

redux-promise允许它们返回一个promise:

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

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

r1zhe5dt

r1zhe5dt2#

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

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

在这些情况下,redux-thunk的好处是,它允许您将复杂性封装在您的action-creator中
但是请注意 * 如果你的Thunk产生并分派promise,那么你会想要同时使用这两个库 *:

  • Thunk将编写原始动作并将其发送出去
  • 然后redux-promise会在reducer中处理由Thunk生成的各个promise的解包,以避免需要的样板文件。(你可以用promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)在Thunks中做所有的事情......但为什么要这样做呢?)

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

  • Thunks用于Redux流程的 * 开始 *:如果你需要创建一个复杂的动作,或者封装一些复杂的动作创建逻辑,把它放在你的组件之外,当然也不要放在reducer之外。
  • redux-promise用于流的结尾,一旦所有内容都被归结为简单的promise,并且您只想打开它们并将其解析/拒绝的值存储在存储中

注解/参考:

  • 我发现redux-promise-middleware是原始redux-promise背后思想的一个更完整和更容易理解的实现,它正在积极开发中,redux-promise-reducer也很好地补充了它。
  • 还有其他类似的中间件可用于组合/排序您的复杂操作:一个非常流行的是redux-saga,它非常类似于redux-thunk,但是基于生成器函数的语法。同样,你可能会将它与redux-promise结合使用,因为sagas产生的promise你不想用大量的样板文件手动打开和处理。
  • 这里有一篇很棒的文章,直接比较了各种异步组合选项,包括thunk和redux-promise-middleware。DR:“Redux Promise Middleware与其他一些选项相比大大减少了样板文件”... “我想我喜欢 Saga 用于更复杂的应用程序 (阅读:“uses”), 和Redux Promise Middleware for everything else."
  • 请注意,有一种重要的情况,您可能认为需要分派多个操作,但实际上并不需要,您可以将简单的事情保持简单。在这种情况下,您只需要多个reducer响应单个异步调用,并且您倾向于将多个操作分派给这些reducer。但是,* 没有任何理由可以解释为什么多个reducer不能监控一个动作类型。* 您只需要确保您的团队知道您正在使用该约定,因此它们不假定只有一个reducer(具有相关名称)可以处理给定操作。
dddzy1tm

dddzy1tm3#

充分披露:我是Redux开发的新手,我自己也很纠结这个问题。我将解释我找到的最简洁的答案:
ReduxPromise在分派动作时返回一个承诺作为有效负载,然后ReduxPromise中间件解析该承诺并将结果传递给reducer。
另一方面,ReduxThunk强制action创建者推迟将action对象实际分派给reducer,直到调用分派。
这里有一个链接到我找到这个信息的教程:https://blog.tighten.co/react-101-part-4-firebase .

相关问题