redux,react-redux,redux-thunk之间有什么区别?

问题描述 投票:48回答:4

我正在使用React + Flux。 我们的团队正计划从通量转向redux。 Redux对于我来自flux world来说非常困惑。 在磁通控制流程中,组件 - >操作 - >存储和存储更新返回组件 简单。 它简单而且非常清晰。

但在redux中它令人困惑。 这里没有商店,是的,有些例子没有使用商店。 我经历了几个教程,似乎每个人都有自己的实现风格。 有些人正在使用容器,有些则没有。 (我不知道这个容器概念,也无法理解mapStatePtoProps所做的mapStateToProps)。

  1. 有人可以清楚地解释如何在redux中控制流程吗?
  2. redux中组件/容器/操作/操作创建者/存储的角色是什么?
  3. redux / react-redux / redux-thunk /任何其他的区别?
  4. 如果您可以发布任何简单而精确的 redux教程的链接,将会非常有用。
javascript reactjs redux reactjs-flux react-redux
4个回答
65
投票
  1. 有人可以清楚地解释如何在redux中控制流程吗? Redux(总是)有一家商店。
  1. 每当您想要替换商店中的状态时,您都会分派操作。

  2. 该动作由一个或多个减速器捕获。

  3. reducer / s创建一个结合旧状态和调度动作的新状态。

  4. 商店订户被通知存在新状态。

  1. redux中组件/容器/操作/操作创建者/存储的角色是什么?
  • 存储 - 保持状态,当新操作到达时,运行调度 - >中间件 - > reducers管道,并在状态被新的状态替换时通知订户。

  • 组件 - 直接不了解状态的哑视图部件。 也被称为表达组件。

  • 容器 - 使用react-redux了解状态的视图片段。 也称为智能组件和更高阶组件


请注意,容器/智能组件与哑组件只是构建应用程序的好方法。


  • 动作 - 与flux相同 - 具有类型和有效负载的命令模式。

  • 动作创建者 - 创建动作的DRY方式(非必要)

  1. redux / react-redux / redux-thunk /其他之间的区别?
  • redux - 与单个存储器一样的流量,可以在任何你喜欢的环境中使用,包括香草js,反应,角1/2等等......

  • react-redux - redux和react之间的绑定,创建容器(智能组件),监听商店的状态变化,准备道具和重新呈现演示(哑)组件。

  • redux-thunk - 允许您编写返回函数而不是动作的动作创建者的中间件。 thunk可用于延迟动作的发送,或仅在满足某个条件时发送。 主要用于对api的异步调用,即在成功/失败时调度另一个操作。

  1. 如果您可以发布任何简单而精确的redux教程的链接,将会非常有用。

13
投票

要回答你的标题问题:

redux,react-redux,redux-thunk之间有什么区别?

  1. redux:主库(独立于React)
  2. redux-thunk:一个redux中间件,可以帮助你进行异步操作
  3. react-redux:将您的redux商店与ReactComponents连接起来

2
投票
  • redux:用于管理应用程序状态的库。
  • react-redux:用于管理React应用程序状态的库。
  • redux-thunk:用于记录,崩溃报告,与asyn API通信,路由等的中间件...

0
投票

下图显示了redux中的数据如何流动: 数据如何流经Redux? Redux的优点如下:

结果的可预测性 - 由于始终存在一个事实来源,即存储,因此不存在关于如何将当前状态与动作和应用程序的其他部分同步的混淆。 可维护性 - 代码变得更容易维护,具有可预测的结果和严格的结构。 服务器端呈现 - 您只需将服务器上创建的商店传递给客户端。 这对初始渲染非常有用,并且可以优化应用程序性能,从而提供更好的用户体验。 开发人员工具 - 从操作到状态更改,开发人员可以实时跟踪应用程序中发生的所有事情。 社区和生态系统 --Redux背后有一个巨大的社区,这使得它更加迷人。 一个由才华横溢的人组成的大型社区为图书馆的改进做出了贡献,并开发了各种应用程序。 易于测试 - Redux的代码主要是小型,纯粹和隔离的功能。 这使代码可测试且独立。 [组织] [2] - Redux准确地说明了代码的组织方式,这使得代码在团队合作时更加一致和简单。

© www.soinside.com 2019 - 2024. All rights reserved.