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

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

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

  1. 有人可以清楚地说明redux中的控制流如何发生吗?
  2. redux中的组件/容器/动作/动作创建者/商店的作用是什么?
  3. redux / react-redux / redux-thunk /其他之间的区别??
  4. 如果您可以发布任何简单而精确的redux教程的链接,这将非常有帮助。
4个解决方案
68 votes
  1. 有人可以清楚地说明redux中的控制流如何发生吗? Redux(总是)只有一家商店。
  1. 每当您要替换存储中的状态时,就调度一个动作。

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

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

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

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

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

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


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


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

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

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

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

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

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

  • Redux入门

  • 使用Idiomatic Redux构建React应用程序

  • 外观和容器组件

Ori Drori answered 2020-02-11T04:35:34Z
13 votes

要回答您的标题问题:

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

  1. redux:主库(独立于React)
  2. redux-thunk:一个redux中间件帮助您进行异步操作
  3. react-redux:将您的redux存储与React组件连接
webdeb answered 2020-02-11T04:36:11Z
2 votes
  • redux:用于管理应用程序状态的库。
  • react-redux:用于管理React应用程序状态的库。
  • redux-thunk:用于记录,崩溃报告,与异步API通讯,路由等的中间件...
sultan aslam answered 2020-02-11T04:36:40Z
0 votes

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

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

Ahmad Sadegh answered 2020-02-11T04:37:07Z
translate from https://stackoverflow.com:/questions/38405571/what-are-differences-between-redux-react-redux-redux-thunk