”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Redux 工具包:React Thunk 和 React Saga。向 Vishal Tiwari 学习。

Redux 工具包:React Thunk 和 React Saga。向 Vishal Tiwari 学习。

发布于2024-11-09
浏览:292

Redux toolkit: React Thunk and React Saga.Learn from Vishal Tiwari.

React Thunk 和 React Saga 是用于处理 React 应用程序中副作用的中间件库,特别是用于管理 API 调用等异步操作。两者通常与 Redux 一起使用,但用途和方法略有不同。


React Thunk

1. 概述:

React Thunk 是一个中间件,允许您编写返回函数而不是操作对象的操作创建器。这对于处理异步操作(例如 API 请求)或复杂的同步逻辑(例如操作的条件分派)非常有用。返回的函数接收dispatch和getState作为参数,允许您调度其他操作或访问函数内的当前状态。

2. 关键概念:

  • 中间件: Thunk 是扩展商店处理函数(即 thunk)能力的中间件。
  • 异步操作:使用 Thunk,您可以延迟操作的分派或根据特定状态或逻辑有条件地分派它。
  • 简单: Thunk 相对简单,在大多数用例中都很容易使用。

3. 工作原理:

  • 通常,动作创建者返回纯 JavaScript 对象(动作)。
  • 使用 Thunk,动作创建者可以返回接收调度和 getState 的函数(“thunk”)。在此函数内,您可以执行异步逻辑(例如,从 API 获取数据),然后分派实际操作。

4. 示例:

以下是如何在 React 应用程序中使用 redux-thunk 的基本示例:

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

5. Thunk的优点:

  • 简单性: Thunk 易于理解和实现。
  • 占地面积小:它重量轻,不需要复杂的配置。
  • 直接控制调度:您可以更好地控制何时以及如何调度操作。

6. 缺点:

  • 难以扩展:对于复杂的异步流程,Thunk 可能会变得混乱,具有嵌套逻辑和大量调度调用。
  • 更少的结构: Thunk 不强制使用特定的结构来管理副作用,如果处理不当,可能会导致代码不一致。

反应传奇

1. 概述:

React Saga是一个中间件,允许您使用生成器函数以更有组织的方式处理副作用。它不像 Thunk 那样返回函数,而是使用“效果”系统来管理异步操作并控制逻辑流程。 Sagas 是长时间运行的后台进程,可以侦听分派的操作并执行 API 调用、数据获取和其他任务等副作用。

2. 关键概念:

  • 生成器函数: Sagas 是使用 ES6 生成器函数 (function*) 实现的,它允许您编写看起来同步的异步代码。
  • 观察者和工作者:传奇通常分为“观察者”传奇(监听调度的动作)和“工作者”传奇(处理副作用)。
  • Take、put、call: Redux-Saga 提供了效果创建器(take、put、call 等)来控制何时触发副作用、调度操作和调用 API。

3. 工作原理:

  • 使用 Redux-Saga,您可以定义负责处理副作用的 sagas(长时间运行的后台任务)。
  • Sagas 通常被编写为生成器函数和产生效果,例如 call(调用函数)和 put(分派操作)。
  • Sagas 还可以使用 take 等待特定操作,或者使用 takeEvery 或 takeLatest 监听任何操作。

4. 示例:

这是如何使用 redux-saga 的基本示例:

   import { call, put, takeLatest } from 'redux-saga/effects';

   // Worker saga: will be fired on FETCH_USER_REQUEST actions
   function* fetchUser(action) {
     try {
       const response = yield call(fetch, '/api/user');
       const data = yield response.json();
       yield put({ type: 'FETCH_USER_SUCCESS', payload: data });
     } catch (e) {
       yield put({ type: 'FETCH_USER_FAILURE', message: e.message });
     }
   }

   // Watcher saga: spawns a new fetchUser task on each FETCH_USER_REQUEST
   function* mySaga() {
     yield takeLatest('FETCH_USER_REQUEST', fetchUser);
   }

   export default mySaga;

5. Redux-Saga的优点:

  • 更适合复杂的副作用: Saga 基于效果的方法更具可扩展性,适合管理复杂的异步流(例如,处理重试、去抖或级联 API 调用)。
  • 可测试: Sagas 很容易测试,因为它们是围绕生成器函数构建的。
  • 声明性:效果的使用可以让人们更清楚会发生什么副作用,使流程更加可预测。
  • 取消和顺序: Saga 可以轻松取消正在进行的任务或强制执行事件的顺序流(例如等待多个操作)。

6. 缺点:

  • 更陡峭的学习曲线:使用生成器函数和整体 saga 模式对于初学者来说可能很难掌握。
  • 开销:对于小型应用程序,与 Thunk 等更简单的解决方案相比,它可能感觉有点矫枉过正。
  • 详细:与 Thunk 相比,Sagas 往往涉及更多样板代码。

比较:React Thunk 与 React Saga

方面 React Thunk React Saga
概念 返回动作创建者中的函数 使用生成器函数产生副作用
学习曲线 更容易学习和使用 由于生成器而具有更高的学习曲线
异步流程 处理简单的异步逻辑 更适合复杂的异步工作流程
代码结构 结构较少,在大型应用程序中可能会变得混乱 提供清晰、结构化的方法
测试 测试可能更具挑战性 由于生成器而更容易测试
用例 简单的异步逻辑,API 请求 复杂流程(例如序列、重试)
表现 轻的 更强大,但开销稍大

何时使用哪个?

  • 使用 React Thunk if:

    • 您的应用程序有相对简单的异步需求,例如基本的API请求和基于条件的调度。
    • 您想要一个轻量级、易于理解、没有太多样板的解决方案。
  • 使用 React Saga 如果:

    • 您需要管理更复杂的异步流程,例如重试、操作排序、竞争条件或相互依赖的多个任务。
    • 您更喜欢声明式方法并希望更好地控制副作用。
    • 从长远来看,您的应用程序需要更好的可测试性和代码可维护性。
版本声明 本文转载于:https://dev.to/vishal_tiwari_114f21d14e5/redux-toolkit-react-thunk-and-react-sagalearn-from-vishal-tiwari-58b?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解决方案: args)抛出异常{ 日历cal = calendar.getInstance(); SimpleDateFormat SDF =新的SimpleDateFormat(“...
    编程 发布于2025-07-03
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄...
    编程 发布于2025-07-03
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-07-03
  • 在GO中构造SQL查询时,如何安全地加入文本和值?
    在GO中构造SQL查询时,如何安全地加入文本和值?
    在go中构造文本sql查询时,在go sql queries 中,在使用conting and contement和contement consem per时,尤其是在使用integer per当per当per时,per per per当per. [&​​&&&&&&&&&&&&&&&默元组方法在...
    编程 发布于2025-07-03
  • CSS强类型语言解析
    CSS强类型语言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    编程 发布于2025-07-03
  • 如何使用“ JSON”软件包解析JSON阵列?
    如何使用“ JSON”软件包解析JSON阵列?
    parsing JSON与JSON软件包 QUALDALS:考虑以下go代码:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    编程 发布于2025-07-03
  • 如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    将pandas dataframe列转换为dateTime格式示例:使用column(mycol)包含以下格式的以下dataframe,以自定义格式:})指定的格式参数匹配给定的字符串格式。转换后,MyCol列现在将包含DateTime对象。 date oped filtering > = p...
    编程 发布于2025-07-03
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-07-03
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-07-03
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-07-03
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-07-03
  • 如何使用node-mysql在单个查询中执行多个SQL语句?
    如何使用node-mysql在单个查询中执行多个SQL语句?
    在node-mysql node-mysql文档最初出于安全原因最初禁用多个语句支持,因为它可能导致SQL注入攻击。要启用此功能,您需要在创建连接时将倍增设置设置为true: var connection = mysql.createconnection({{multipleStatement:...
    编程 发布于2025-07-03
  • Java中假唤醒真的会发生吗?
    Java中假唤醒真的会发生吗?
    在Java中的浪费唤醒:真实性或神话?在Java同步中伪装唤醒的概念已经是讨论的主题。尽管存在这种行为的潜力,但问题仍然存在:它们实际上是在实践中发生的吗? Linux的唤醒机制根据Wikipedia关于伪造唤醒的文章,linux实现了pthread_cond_wait()功能的Linux实现,利用...
    编程 发布于2025-07-03
  • 使用jQuery如何有效修改":after"伪元素的CSS属性?
    使用jQuery如何有效修改":after"伪元素的CSS属性?
    在jquery中了解伪元素的限制:访问“ selector 尝试修改“:”选择器的CSS属性时,您可能会遇到困难。 This is because pseudo-elements are not part of the DOM (Document Object Model) and are th...
    编程 发布于2025-07-03

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3