React Redux 中的异步操作与副作用

在 React 应用中，数据流管理是一个核心问题，特别是在大型复杂应用中。Redux 是一个流行的状态管理库，它为我们提供了单一的数据源。但是，如果我们需要在 Redux 中进行异步操作，如何实现呢？本文将介绍 Redux-Thunk 和 Redux-Saga 这两个常用库来实现异步操作和副作用的处理。

异步操作

在实际开发中，我们可能需要在 Redux 中进行异步操作，如请求服务器获取数据、动态更新 UI 等操作。但是，Redux 本身只支持同步操作，因此我们需要使用一些库实现异步操作。

Redux-Thunk

Redux-Thunk 是一个流行的 Redux 异步操作中间件，它允许我们在 Redux 的 action 中执行异步操作并返回一个函数。这个函数接收 dispatch() 方法作为参数，使我们可以异步地调用 action 方法。

下面是一个简单的 Redux-Thunk 示例：

-- ----------
----- -------- - -- -- ---------- -- -
  ---------- ----- ----------------- ---
  ------------------
    ---------------- -- ----------------
    ------------ -- -
      ---------- ----- -------------------- -------- ---- ---
    --
    -------------- -- -
      ---------- ----- -------------------- -------- ----- ---
    ---
--

-- ------------
------ - ------- - ---- --------------
------ - -------- - ---- ------------

----- --------- - -- ----- -------- -- -- -
  ------------ -- -
    -----------
  -- ----

  ------ ------------------
--

----- --------------- - ------- -- --
  ----- -----------
---

------ ------- ------------------------ - -------- --------------

在这里，我们定义了一个 loadData() 函数，它返回一个函数。这个函数接收 dispatch() 方法作为参数，并在异步请求数据后发送 LOAD_DATA_SUCCESS 或 LOAD_DATA_FAILURE action。在组件中使用 connect() 方法将 loadData() 方法注入到 props 中，并在组件挂载后调用。当数据加载时，Redux store 中的数据将更新并触发组件重新渲染。

Redux-Saga

与 Redux-Thunk 不同的是，Redux-Saga 通过使用 Generator 函数来实现异步操作。它使用了 ES6 的 Generator 函数和 yield 表达式，使我们能够以声明的方式编写异步代码。

下面是一个简单的 Redux-Saga 示例：

-- ----------
----- -------- - -- -- --
  ----- ------------
---

-- --------
------ - ---------- ----- --- - ---- ---------------------

--------- ----------- -
  --- -
    ----- -------- - ----- ----------- -------------
    ----- ---- - ----- ----------------
    ----- ----- ----- -------------------- -------- ---- ---
  - ----- ------- -
    ----- ----- ----- -------------------- -------- ----- ---
  -
-

--------- ---------------- -
  ----- ---------------------- -----------
-

------ ------- --------- ---------- -
  ----- ------------------------
-

-- ------------
------ - ------- - ---- --------------
------ - -------- - ---- ------------

----- --------- - -- ----- -------- -- -- -
  ------------ -- -
    -----------
  -- ----

  ------ ------------------
--

----- --------------- - ------- -- --
  ----- -----------
---

------ ------- ------------------------ - -------- --------------

在这里，我们定义了一个 loadData() 方法，它触发 LOAD_DATA action。在 sagas.js 中，我们使用 takeEvery() 方法监听 LOAD_DATA action，并在获取数据时使用 call() 方法使 fetch() 函数变成异步的。在 fetchData() 中，我们使用 try/catch 语句来处理异步请求的结果，并使用 put() 发送 LOAD_DATA_SUCCESS 或 LOAD_DATA_FAILURE action。最后，我们在 rootSaga() 中使用 all() 方法来启动 watchFetchData() 任务。这个任务将 LISTEN_FOR_DATA action 与 fetchData() 方法相关联。

副作用

副作用是指 Redux store 中状态改变后除了更新数据状态外对其他系统组件和特定环境产生的变化，包括但不限于 API 请求、I/O 操作、路由跳转、定时器回调等等。Redux 的设计哲学在很大程度上是为了避免副作用。然而，有时候我们确实需要处理副作用的情况，这就需要使用副作用管理库来处理这些事情。

Redux-Saga

Redux-Saga 是一个流行的处理副作用的库，它以 Daemon 进程的形式运行，监听和处理事件，以响应和触发 Redux action。应用 Redux-Saga 可以使应用程序变得更加可预测，易于测试和维护。

下面是一个简单的 Redux-Saga 副作用管理示例：

-- ----------
----- -------- - -- -- --
  ----- ------------
---

----- -------------- - -- -- --
  ----- -------------------
---

-- --------
------ - ----------- ---- ----- --------- - ---- ---------------------

--------- ----------- -
  --- -
    ----- -------- - ----- ----------- -------------
    ----- ---- - ----- ----------------
    ----- ----- ----- -------------------- -------- ---- ---
  - ----- ------- -
    ----- ----- ----- -------------------- -------- ----- ---
  - ------- -
    -- ------ ------------ -
      ---------------- ------------
    -
  -
-

--------- ---------------- -
  ----- ----------------------- -----------
-

--------- ----------------- ---- -- -
  -- ----- --- ------------------- -
    ----- ---------
  -
-

------ ------- --------- ---------- -
  ----- ---------------------- --------------- -------------------
-

-- ------------
------ - ------- - ---- --------------
------ - --------- -------------- - ---- ------------

----- --------- - -- ----- --------- -------------- -- -- -
  ------------ -- -
    ----- ------ - -----------
    ------ -- -- -
      -----------------
    --
  -- ----

  ------ ------------------
--

----- --------------- - ------- -- --
  ----- -----------
---

------ ------- ------------------------ - --------- -------------- --------------

在这里，我们定义了两个 action，一个是 loadData() 用于触发 LOAD_DATA action，另一个是 cancelLoadData() 用于触发 CANCEL_LOAD_DATA action。在 sagas.js 中，我们使用 takeLatest() 方法监听 LISTEN_FOR_DATA action，并在获取数据时使用 call() 方法使 fetch() 函数变成异步的。在 fetchData() 中，我们使用 try/catch 语句来处理异步请求的结果，并使用 put() 发送 LOAD_DATA_SUCCESS 或 LOAD_DATA_FAILURE action。同时，我们使用 cancelled() 方法来检测任务是否被取消。在 cancelFetchData() 中，我们取消未完成的 fetch 请求。在 rootSaga() 中使用 all() 方法来启动 watchFetchData() 任务和 takeLatest("*", cancelFetchData) 任务。最后，当组件卸载时，我们调用 cancelLoadData() 方法以取消当前的请求。

结论

在本文中，我们介绍了 Redux-Thunk 和 Redux-Saga 这两个常用库来实现异步操作和副作用的处理。Redux-Thunk 通过函数式编程的方式实现了异步处理，Redux-Saga 则通过 Generator 函数的方式，提供了一种易于测试和维护的异步解决方案。对于副作用的处理，Redux-Saga 提供了一种易于控制的方式。我们可以根据具体的业务需求选择不同的方案。这些库虽然有一些学习曲线，但是一旦掌握，它们将使我们更加容易地管理和处理复杂的前端应用程序。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670b8d03d91dce0dc88b306a

阅读全文

猜你喜欢

  • 使用 Jest 测试 GraphQL API 的最佳实践

    前端开发者在开发 GraphQL API 时，需要保证 API 的质量和稳定性，同时，测试 GraphQL API 也是必不可少的。使用 Jest 测试 GraphQL API 是一个不错的选择，它提...

    6 天前
  • Serverless VS 传统服务：哪种更优？

    作为前端开发者，我们通常会使用传统的服务模型来将我们的应用程序部署到服务器上。这种模型的好处是我们可以完全控制服务器，决定服务器上的资源如何分配，以及如何管理服务器的配置和安全性。

    6 天前
  • ES7 中的 Array.prototype.includes() 的背景和实践

    ES7（ECMAScript 2016）为 JavaScript 带来了一些新功能，其中一个有用的功能是 Array.prototype.includes() 方法。

    6 天前
  • 响应式设计对于您的电子商务网站的影响！

    在当今的数字时代，越来越多的用户使用不同尺寸和分辨率的设备访问网站，如智能手机、平板电脑、笔记本电脑和台式电脑等。在这种情况下，一种灵活的 Web 设计方法，即响应式设计（Responsive Des...

    6 天前
  • 如何使用 Hapi.js 和 WebSockets 构建实时网络应用程序？

    在现代网络编程中，实时网络应用程序变得越来越流行。我们可以利用 WebSockets 技术来构建实时通信的网络应用。本文将介绍如何使用 Hapi.js 和 WebSockets 构建实时网络应用程序。

    6 天前
  • Angular 中如何使用 Ant Design 组件库增强 UI 设计

    前言 Ant Design 是一款非常受欢迎的 UI 组件库，它包含了大量的组件，可以帮助我们快速构建出美观且易于使用的界面。而 Angular 是一款流行的前端框架，它提供了丰富的功能和便于使用的 ...

    6 天前
  • Web Components 的组件库与各种 UI 框架对比评测

    Web Components 是一种用于创建可重用组件的 Web 标准。它们允许您将组件封装起来，以便在多个项目中重用，而无需考虑实现的细节。这个特性使得 Web Components 成为前端工程师...

    7 天前
  • Fastify 应用程序中的文件上传进度条教程

    如果你正在开发一个需要文件上传功能的 web 应用程序，那么你可能会遇到一个非常棘手的问题：如何显示上传进度条以及如何在上传过程中处理它？ 在本文中，我们将介绍如何使用 Fastify（一个高效、低开...

    7 天前
  • 30 天 JavaScript 实战第 13 天 -- Promise 异步编程技巧 ES6 篇

    前端开发中，异步编程是一项非常重要的技能，因为 HTML、CSS、JavaScript 等资源的文件加载、网络请求以及浏览器本身的事件都属于异步操作。在 JavaScript 中，我们可以使用回调函数...

    7 天前
  • 将 ECMAScript 2020 中的 Nullish Coalescing Operator 用于更好的代码维护

    在前端开发中，我们经常需要在代码中判断某个值是否为空，如果为空则使用默认值。在早期的 JavaScript 版本中，我们通常使用短路运算符来实现这个功能，例如： ----- -------- - --...

    7 天前
  • 如何使用 Mocha 进行 Express 应用程序测试

    Mocha 是一个流行的 JavaScript 测试框架，可以用于 Node.js 应用程序的单元测试和集成测试。在本文中，我们将介绍如何使用 Mocha 测试 Express 应用程序。

    7 天前
  • GraphQL 协议介绍及实战经验分享

    前言 GraphQL 是一种现代化的数据查询和操作协议，它由 Facebook 开发并于 2015 年首次公开发布。GraphQL 能够满足现代应用程序在数据查询和操作上的需求，使得前端开发人员更加高...

    7 天前
  • 使用 SASS 为 IE 兼容性写特定样式的注意事项

    在前端开发过程中，我们经常会遇到要为不同浏览器写特定的样式，其中最具有挑战性的就是兼容 IE 浏览器。为了提高效率和可维护性，我们可以使用 SASS 预处理语言来为 IE 浏览器编写特定的样式。

    7 天前
  • 使用 ES8 中的 promise.finally() 为每个异步请求添加 finally 处理程序

    在前端开发中，我们经常会遇到异步请求的情况，比如通过 Ajax 请求获取数据或者通过 Promise 等方式进行异步操作。有时候我们需要在请求结束后执行一些处理操作，例如清空表单、隐藏加载中的提示等等...

    7 天前
  • 使用 TypeScript 实现高质量的 React 应用程序

    前言 React 是一个非常流行的 JavaScript 库，它可以帮助开发者快速构建 Web 应用程序。但是，在开发大型 React 应用程序时，难免会有一些问题，例如类型错误、代码难以维护等。

    7 天前
  • RxJS 中的逆转操作符使用指南

    RxJS 是一个强大的库，可以为前端开发人员大大简化异步操作。在使用 RxJS 时，逆转操作符是非常有用的工具，可以用于将事件流逆转并操作流中的元素。本文将介绍 RxJS 中的逆转操作符，如何使用它们...

    7 天前
  • 在Fastify应用程序中使用YAML配置文件

    Fastify，是一个基于Node.js的高效开发框架，它的速度比大多数Web框架都要快。配置文件在服务器端应用程序开发中具有重要的作用，它可以帮助我们快速且方便地配置应用程序。

    7 天前
  • Headless CMS 在数字化医疗领域的应用场景探索

    在数字化医疗领域，随着技术的不断进步，越来越多的医疗机构开始使用 Headless CMS 技术来构建数字化应用。Headless CMS 技术允许开发者从传统的 CMS 模式中解脱出来，创造出更加灵...

    7 天前
  • Tailwind CSS 如何兼容 IE 和 Edge

    Tailwind CSS 是一种流行的前端库，它可以帮助开发者快速构建样式，使得页面看起来更加漂亮。然而，尽管大多数现代浏览器支持最新的 CSS 特性，但一些老旧的浏览器（比如 IE 和 Edge）并...

    7 天前
  • GraphQL 中的数据模型设计解析及最佳实践

    在现代 Web 开发中，前后端分离的开发模式已经得到了广泛的应用。GraphQL 作为一种新的 API 开发和查询语言，提供了一种更加灵活、高效的数据交互方式，被越来越多的开发者所关注和使用。

    7 天前

相关推荐

    暂无文章