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

3 回答

• 95

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

  回复于 2024-05-03T18:01:46+08:00
• 20

  您可能希望/需要在您的应用中一起使用 . Start with redux-promise for routine promise-producing async tasks and then scale up to add Thunks (or Sagas, etc.) as complexity increases ：

  • 当生活很简单，并且你只是与创造者进行基本的异步工作，而这些创造者会返回一个承诺，那么 redux-promise 将改善你的生活并简化它，快速而简单 . （简而言之，当你解决时，你需要考虑'unwrapping'你的承诺，然后编写/发送结果，redux-promise（-middleware）会为你处理所有无聊的事情 . ）

  • 但是，生活变得更加复杂：

  • 也许你的动作创建者希望产生几个承诺，你想将它们作为单独的动作分配给单独的减速器？

  • 或者，在决定如何以及在何处分派结果之前，您需要管理一些复杂的预处理和条件逻辑？

  在那些情况下， the benefit of redux-thunk is that it allows you to encapsulate complexity inside your action-creator .

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

  • Thunk将组成原始动作并发送它们
    然后
  • redux-promise 将处理在您的Thunk生成的单个promise的reducer上展开，以避免需要的样板 . （你可以用Thunks做所有事情， promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError) ......但你为什么要这样做？）

  ---

  另一种总结用例差异的简单方法： the beginning vs. the end of the Redux action cycle ：

  • Thunks用于Redux流程的开头：如果您需要创建复杂的操作，或者封装一些粗糙的动作创建逻辑，将其保留在组件之外，并且绝对不能使用Reducer .

  • redux-promise 是您的流程结束，一旦所有内容都归结为简单的承诺，您只想打开它们并将其已解决/拒绝的值存储在商店

  ---

  NOTES / REFS：

  • 我发现 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 reduces boilerplate pretty dramatically vs some of the other options" ......“我认为我喜欢Saga用于更复杂的应用程序（阅读："uses"），以及Redux Promise Middleware用于其他一切 . ”）

  • 请注意's an important case where you may think you need to dispatch multiple actions, but you really don' t，你可以保持简单的事情 . 这就是你想要多个Reducer对你的异步调用作出反应的地方 . 但是，'s no reason at all why multiple reducers can' t监视单个动作类型 . 你'd simply want to make sure that your team knows you'重新使用该约定，因此他们不假设只有一个reducer（具有相关名称）可以处理给定的操作 .

  回复于 2024-05-03T18:01:46+08:00
• 67

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

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

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

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

  回复于 2024-05-03T18:01:46+08:00