npm 包 redux-saga-middleware 使用教程

在前端开发中，Redux 是一个广泛使用的状态管理库。但是，Redux 在处理异步操作方面有一定的局限性。为了解决这个问题，redux-saga 基于 ES6 的 generator 提供了一种优雅的方式来管理 Redux 应用程序中的异步操作。而 redux-saga-middleware 是一个基于 redux 和 redux-saga 的中间件，通过简化 redux-saga 的使用，使得开发者能够更快速地编写和维护 Redux 应用程序。

安装

使用 npm 包管理工具进行安装：

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

集成

使用 redux-saga-middleware 需要在 createStore 的时候使用 applyMiddleware 中间件进行集成。具体的，可以通过以下代码进行集成：

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

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

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

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

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

在 redux-saga-middleware 中，reducer 和 saga 只有一次实例化，创建 store 之后，直接在 middleware 中生成并设置两者的实例。同时，redux-saga-middleware 把所有传进来的 action 包装成 function，通过 redux-saga 实现异步操作。

使用

中间件选项

在使用 redux-saga-middleware 时，我们需要在 createMiddleware 函数中传入三个参数。具体的，可以通过以下代码创建 middleware：

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

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

其中，createMiddleware 接受一个对象作为参数，并支持以下属性：

  • whitelist: 一个包含字符串的数组，它限制了哪些 action 会被改写。默认情况下，将会替换原始的 action。

  • onActionDispatched: 由受影响的 action 触发的回调函数。

  • onActionCancelled: 由受影响的 action 触发的回调函数。在这里，我们可以对被取消的请求进行一些额外的处理操作。

使用 Redux 插件

redux-saga-middleware 也提供了一个 Redux DevTool 插件，通过它我们可以在我们的应用中方便地跟踪 action 和 effect 的生命周期、查看 store 的状态等。具体用法如下：

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

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

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

这里我们首先创建了一个 Redux DevTool 插件的实例 devToolsEnhancer，然后在创建 createStore 时，将其作为 composeWithDevTools 的参数之一传入。

示例

我们假设我们需要使用 redux-saga-middleware 来处理一个简单的异步操作。

定义 Action 类型

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

定义 Action Creator 对象

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

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

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

定义 State 对象和 Reducer

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

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

定义 Saga

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

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

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

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

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

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

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

将 Saga 注入到 Root Saga 中

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

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

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

使用 Action Creator 发起请求

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

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

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

  -- ---
-

这样，当用户触发 fetchUsers 函数，就会发起一个异步的获取用户信息请求，并通过 dispatch 方法将 FETCH_USER_REQUEST action 发送到 Store 中。Redux middleware 会将其转换成处理异步函数的函数，并最终通过 FETCH_USER_SUCCESS 或 FETCH_USER_FAILURE 更新应用程序的状态。这样我们就完成了一个基础的异步应用。

总结

在本文中，我们介绍了 redux-saga-middleware，它是一个通过简化 redux-saga 的使用，提高开发者的开发效率和团队维护效率的中间件。我们讲解了 redux-saga-middleware 的安装和集成、选项和插件的使用，以及通过示例代码展示了如何在 Redux 应用中使用 redux-saga-middleware 来管理异步操作。希望这篇文章对于使用 Redux 应用的开发者有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 bzfxd 使用教程

    简介 npm 是一个 node.js 的包管理器，它可以方便地下载、安装和管理 node.js 的扩展包，也可以方便地与其他开发者共享自己的包。而 bzfxd 则是一个 npm 包，是一个提供了方便的...

    2 年前
  • NPM包: who-prototyped 使用教程

    在JavaScript开发中，原型是一个至关重要的概念，可以用来扩展对象和实现继承。使用who-prototyped可以有效地在调试和开发时，查看对象的继承链和原型链。

    2 年前
  • npm 包 encumber 使用教程

    什么是 encumber？ encumber 是一种轻量级的前端加密库，它可以帮助我们对前端代码进行加密，保护代码的安全性和商业私密信息的保密性。encumber 可以实现多种前端加密方式，如对称加密...

    2 年前
  • npm 包 fis3-parser-webp 使用教程

    概述 WebP 是由谷歌公司推出的一种新的图片格式，相比于传统的 JPEG 和 PNG 格式，它具有更小的文件体积和更高的渲染速度。因此，越来越多的网站开始采用 WebP 格式来提高页面性能。

    2 年前
  • npm 包 raw-sqs-json 使用教程

    前言 在现代 Web 开发中，前后端分离已经成为了开发的常态。而消息队列因其高可靠性、异步性以及解耦的特性，也成为了现代 Web 应用中不可或缺的一部分。AWS 的 Simple Queue Serv...

    2 年前
  • npm 包 iol 使用教程

    在前端开发中，我们时常需要对于前端资源进行管理与优化，而 iol 就是一个可以帮助我们解决这些问题的 npm 包。本文将详细介绍 iol 的安装、使用及常用场景。

    2 年前
  • npm 包 mediacenter 使用教程

    在前端开发中，媒体中心是一个重要的元素。通过使用 mediacenter 这个 npm 包，我们可以方便地实现媒体中心的功能。本文将介绍 mediacenter npm 包的使用教程，包括安装和配置，...

    2 年前
  • npm 包 pomelo-npm-package-test 使用教程

    pomelo-npm-package-test 是一个针对 pomelo 项目的 npm 包，它提供了一些用于测试 pomelo 项目的方法。本文将介绍如何安装和使用 pomelo-npm-packa...

    2 年前
  • npm 包 gmap-react 使用教程

    在前端开发中，地图是一个非常重要的组件。而 gmap-react 就是一个基于 React 的 Google Maps 组件库，能够方便地在 React 项目中集成 Google 地图。

    2 年前
  • npm 包 twilio-thinqlcr 使用教程

    在前端开发中，短信和电话通知是比较常见的需求。而使用 npm 包 twilio-thinqlcr 可以满足这些需求。本篇文章将介绍如何使用该 npm 包实现短信和电话通知。

    2 年前
  • npm 包 base64url-ts2 使用教程

    简介 随着互联网的发展，前端开发愈发重要。而 npm 包作为前端开发中必不可少的工具之一，也应当得到充分的应用和学习。本文将介绍一种名为 base64url-ts2 的 npm 包的使用方法，为前端开...

    2 年前
  • npm 包 koality-react-native-template 使用教程

    在 React Native 开发中，使用合适的模板可以大大提高开发效率，并保证开发质量。koality-react-native-template 就是一款优秀的 React Native 模板，其...

    2 年前
  • npm 包 aaanimal 使用教程

    在前端开发中，常常需要使用一些简单的图片动画，比如一些可爱的小动物动图。然而手动去制作这些动图需求费时费力，为此，我们可以使用一个 npm 包 —— aaanimal。

    2 年前
  • npm 包 es-microplugin 使用教程

    如果你正在用 JavaScript 编写前端应用程序，那么 npm 包 es-microplugin 可能是你需要的。它是一个小型的插件框架，可以帮助你轻松地编写可重用的插件。

    2 年前
  • npm 包 hexo-next-list-related-posts 使用教程

    在 Hexo 博客系统中，相关文章展示是一个常见的需求。hexo-next 是一个非常受欢迎的 Hexo 主题，它提供了一个名为 list_related_posts 的模板标签，可以在文章页面中展示...

    2 年前
  • npm 包 generator-dangei 使用教程

    介绍 generator-dangei 是一个使用 Yeoman generator 来生成 dangei（单页应用）的脚手架工具。它可以帮助开发者快速创建一个基于 React、TypeScript ...

    2 年前
  • npm 包 hostname-match 使用教程

    如果您正在开发一个基于前端的项目，并且正在使用 Node.js 进行包管理，那么您可能会使用到 npm 包。其中一个实用的包是 hostname-match，它可以帮助您在 Web 应用程序中匹配主机...

    2 年前
  • npm 包 marchlodown-julia 使用教程

    前言 在前端领域中，有很多非常优秀的 npm 包，它们不仅提供了很多实用的工具和功能，还起到了教育和学习的作用。其中一个非常有价值的 npm 包就是 marchlodown-julia，它可以让我们更...

    2 年前
  • npm 包 myeducationalpractice 使用教程

    前言 在 Web 前端开发中，我们经常需要使用依赖包来加快开发效率，节省时间和精力。其中，npm 是一个被广泛使用的包管理器，可以让我们方便地查找、安装、更新和卸载各种依赖包。

    2 年前
  • npm 包 rollup-plugin-hash-fix 使用教程

    在前端开发中，我们经常需要将多个 JS 文件打包成一个文件，减少页面加载的请求数，并提高网页性能。而在打包过程中，我们可能需要使用 rollup 这样的工具来进行打包。

    2 年前

相关推荐

    暂无文章