乐闻世界logo
搜索文章和话题

React Redux 和 Redux Thunk 之间有什么区别?

7 个月前提问
3 个月前修改
浏览次数123

4个答案

1
2
3
4

Redux: Redux 是一个独立的状态管理库,它可以与任何JavaScript应用一起使用。Redux的核心思想是维护一个单一的全局状态对象,这个状态对象是不可变的。当我们想要改变状态时,我们会派发(dispatch)一个行为(action),这是一个描述发生了什么的普通对象。然后这个action被送到reducer函数,reducer函数决定如何根据action的类型及其数据来改变状态。

例如,在一个计数器应用中,你可能有一个action { type: 'INCREMENT' },和一个reducer,当遇到这个action时,它会将状态中的计数值加一。

React-Redux: React-Redux 是Redux的官方React绑定,它使得我们可以容易地将Redux和React应用程序连接起来。它提供了 <Provider>组件,使得Redux store能够被整个应用访问,以及 connect()函数,可以将React组件连接到Redux store。在新的React Redux版本中,connect()函数的功能也可以通过 useSelectoruseDispatch这样的React hooks来实现。

举一个例子,假设你有一个展示计数器值的React组件,你可以使用 useSelector hook来获取当前的计数值,并使用 useDispatch来派发INCREMENT或DECREMENT这样的actions。

Redux-Thunk: Redux-Thunk 是Redux的一个中间件,它允许我们在action创建函数中执行异步操作。传统的action创建函数返回一个action对象,但是使用redux-thunk后,我们可以返回一个函数,这个函数接收 dispatchgetState作为参数。这使得在action创建函数中可以进行异步API调用,并且在数据到达时派发普通的同步action。

比如,如果你有一个异步操作,需要从服务器加载一些数据,你可能会有一个thunk action创建函数,它在开始加载时派发一个 { type: 'LOADING_DATA' }的action,在数据加载成功后派发 { type: 'DATA_LOADED', payload: data },并且在出现错误时派发 { type: 'LOADING_ERROR', error: error }

总的来说,Redux是构建状态管理系统的基础,React-Redux是将Redux集成到React应用中的工具,而Redux-Thunk则是扩展Redux以处理异步操作的中间件。三者合作可以创建一个既可以处理同步也可以处理异步逻辑的强大的React应用状态管理系统。

2024年6月29日 12:07 回复
  1. 有人可以清楚地解释 redux 中控制流是如何发生的吗?

Redux(始终)有一个存储。

  1. 每当您想要替换商店中的状态时,您都可以调度一个操作。

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

  3. 减速器创建一个新状态,该状态结合了旧状态和分派的操作。

  4. 商店订阅者会收到有新状态的通知。

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

  • 组件 - 不直接了解状态的哑视图部分。也称为演示组件。

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


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


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

  • 动作创建者 - 创建动作的 DRY 方式(不是绝对必要的)

  1. redux/react-redux/redux-thunk/任何其他之间的区别?
  • redux - 像通量一样的流,具有单个商店,可以在您喜欢的任何环境中使用,包括 vanilla js、react、Angular 1/2 等...

  • React-Redux - Redux 和 React 之间的绑定。该库提供了一组反应钩子- useSelector()useStore()从存储中获取数据,并useDispatch()调度操作。您还可以使用该connect()函数创建 HoC(高阶组件),它监听存储的状态更改,为包装的组件准备 props,并在状态更改时重新渲染包装的组件。

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

  1. 如果您可以发布任何简单而精确的 redux 教程的链接,那将非常有帮助。
2024年6月29日 12:07 回复

回答你的标题问题:

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

  1. redux:主库(独立于React)
  2. redux-thunk:一个 redux 中间件,可以帮助您执行异步操作
  3. react-redux:将你的 redux 存储与 ReactComponents 连接起来
2024年6月29日 12:07 回复
  • redux:用于管理应用程序状态的库。
  • react-redux:用于管理React应用程序(redux)状态的库。
  • redux-thunk:一个用于日志记录、崩溃报告、与异步 API 对话、路由等的中间件...
2024年6月29日 12:07 回复

你的答案