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


73

我正在使用React + Flux。我们的团队计划从助焊剂转变为还原剂。Redux对来自助焊剂世界的我非常困惑。在磁通控制中,组件->操作->存储和存储更新返回组件简单。它很简单,也很清楚。

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

  1. 有人可以清楚地说明redux中的控制流是如何发生的吗?
  2. redux中的组件/容器/动作/动作创建者/商店的作用是什么?
  3. redux / react-redux / redux-thunk /其他之间的区别??
  4. 如果您可以发布任何简单而精确的redux教程的链接,这将非常有帮助。

1
查看官方的Redux文档,这将使您对提到的所有要点有很多见解。
Timo

6
Red ucer + Fl ux = Redux
webdeb

Answers:


91
  1. 有人可以清楚地说明redux中的控制流是如何发生的吗?Redux(总是)只有一家商店。
  1. 每当您要替换存储中的状态时,就调度一个动作。

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

  3. 减速器创建一个新状态,将旧状态和分派的动作结合在一起。

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

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

  • 组件-无法直接知道状态的哑视图部分。也称为演示组件。

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


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


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

  • 动作创建者-创建动作的DRY方法(并非绝对必要)

  1. redux / react-redux / redux-thunk /其他之间的区别?
  • redux-具有单个存储的流量之类的流量,可在任何喜欢的环境中使用,包括香草js,react,angular 1/2等。

  • react-redux -redux和react之间的绑定,它创建容器(智能组件)来侦听商店的状态变化,为这些组件准备道具并重新呈现表示(哑)组件。

  • redux-thunk-中间件,可让您编写返回函数而不是操作的操作创建者。重击程序可用于延迟操作的分发,或者仅在满足特定条件时调度。主要用于对api的异步调用,该调用在成功/失败时调度另一个操作。

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

20

要回答您的标题问题:

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

  1. redux:主库(独立于React)
  2. redux-thunk:redux中间件,可帮助您进行异步操作
  3. react-redux:将您的redux存储与ReactComponents连接

3
  • redux:用于管理应用程序状态的库。
  • react-redux:用于管理React应用程序状态的库。
  • redux-thunk:一个用于记录,崩溃报告,与异步API通讯,路由等的中间件...

0

下面的图像演示了数据如何在Redux中流动数据如何通过Redux流动? Redux的优点如下:

结果的可预测性–由于总是有一个真实的来源,即商店,因此对于如何将当前状态与操作和应用程序的其他部分进行同步没有任何困惑。 可维护性–该代码变得易于维护,具有可预测的结果和严格的结构。 服务器端渲染–您只需要将在服务器上创建的存储传递给客户端。这对于初始渲染非常有用,并在优化应用程序性能时提供了更好的用户体验。 开发人员工具–从操作到状态更改,开发人员可以实时跟踪应用程序中进行的所有操作。 社区与生态系统– Redux在其背后拥有庞大的社区,这使其使用更加引人入胜。大量的才华横溢的社区为图书馆的发展做出了贡献,并开发了各种应用程序。 易于测试– Redux的代码主要是小的,纯净的和孤立的功能。这使代码可测试且独立。 [组织] [2] – Redux精确地规定了代码的组织方式,这使得团队工作时代码更一致,更容易。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.