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

Question

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

这两个包之间的主要区别是什么？在单页反应应用中使用这两个包还是坚持使用redux-thunk有什么好处就足够了？

Answer 1

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

Answer 2

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

• 当生活很简单,而你只是与创造者做基本的异步工作,而这些创造者会返回一个承诺,那么redux-promise就会改善你的生活并简化它,快速而简单.(简而言之,当你解决时,你需要考虑'展开'你的承诺,然后编写/发送结果,redux-promise(-middleware)会为你解决所有无聊的事情.)
• 但是,生活变得更加复杂:
  • 也许你的动作创建者希望产生几个承诺,你想将它们作为单独的动作分配给单独的减速器？
  • 或者,在决定如何以及在何处分派结果之前,您需要管理一些复杂的预处理和条件逻辑？

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

但请注意,如果您的Thunk生成并分发承诺,那么您将希望将两个库一起使用:

• Thunk将组成原始行动并派遣他们
• redux-promise然后会处理在减速器上展开你的Thunk产生的个别承诺,以避免需要的样板.(你可以用Thunks做所有事情,promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)但......为什么你呢？)

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

• Thunk用于Redux流程的开始:如果您需要创建复杂的操作,或者封装一些粗糙的动作创建逻辑,将其保留在组件之外,并且绝对不会减少.
• redux-promise是你的流程结束,一旦所有事情都归结为简单的承诺,你只想打开它们并将其已解决/拒绝的值存储在商店中

NOTES/REFS:

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

Answer 3

完全披露:我对Redux开发相对较新,并且自己也在努力解决这个问题.我会解释一下我发现的最简洁的答案:

ReduxPromise在调度操作时返回promise作为有效负载,然后ReduxPromise中间件用于解析该promise并将结果传递给reducer.

另一方面,ReduxThunk强制动作创建者暂停实际将动作对象分派给reducers,直到调用dispatch为止.

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