npm 包 redux-saga-crud-service 使用教程

简介

redux-saga-crud-service 是一个针对 Redux-Saga 应用中常用的 CRUD 操作的辅助工具类。该 npm 包提供了一系列高度封装的 API，可以有效地节省开发者编写 CRUD 相关action 和 saga 的时间，以及降低了开发过程出现错误的概率。

安装

使用该 npm 包前，您需要确保安装了以下依赖：

  • Redux: ^4.0.0
  • Redux-saga: ^1.0.0
  • Axios: ^0.18.0

您可以通过 NPM 或 Yarn 安装，我们以 NPM 为例：

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

使用方法

当您安装完该 NPM 包后，您可以在 reducer 和 saga 中使用它提供的工具类。

创建 reducer

在 redux 中配置 reducer 时，您可以使用 redux-saga-crud-service 提供的方法来快速生成基于 CRUD 操作的 reducer，您可以参考以下代码：

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

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

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

创建 saga

在配置 saga 时，您可以使用以下内容：

  1. buildSaga 函数生成与服务端交互的 saga worker。该函数需要传入请求类型（REQUEST_TYPE）和卸载类型（CLEAR_TYPE）：
------ - --------- - ---- --------------------------

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

--------- ------------- -
    ----- --------------------------- ----------------
-
  1. watchListService 函数生成监听工具，该工具可以监听某个 reducer，当 redux state 发生变化时，则会自动调用相应的 Request Action。
------ - ---------------- - ---- --------------------------

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

示例代码

我们编写了一个简单的例子以展示如何使用 redux-saga-crud-service 来实现 CRUD 操作。我们假设在我们的应用中，我们需要基于用户的资料表，以获取、更新和删除存在于数据中的资料。

初始状态

我们的 Redux store 初始状态需要指定以下属性：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

监听请求

我们首先需要实现从后端提取信息的 exampleService，它与 CRUD 操作中的“获取”操作对应，我们需要发送 HTTP GET 请求以获取整个表格的内容。我们在 example-saga.js 中定义该 service 的 implementation：

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

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

在将 service 与 Saga 绑定之前，我们需要先生成一个 reducer，该 reducer 可以接收到 Redux state 中的请求信息。我们在 example-list-reducer.js 中定义该 reducer 的 implementation：

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

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

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

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

我们需要在 Saga listener 中让 exampleService 与 exampleList reducer 绑定。我们在 example-saga.js 中实现该任务：

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

-- ---

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

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

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

显示数据列表

当监听器与服务绑定后，我们现在可以使用 Redux store 中的数据了。我们需要将变量例 exampleList 转化为 React 组件的 props 并传递给视图层。该组件将会用于在页面中显示列表的信息。

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

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

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

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

获取单个信息

接下来，我们需要定义与“获取单个信息”对应的 Redux state、reducer、saga-worker 和 API 路由。该任务与 exampleList 相似，区别在于我们需要将 reducer 初始值设置为空对象，该任务在 exampleItemReducer 文件中以如下实现：

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

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

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

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

该 reducer 会接收 EXAMPLE_DETAIL_REQUEST 请求，然后检索 redux store 中的值来查找特定 ID 的数据，并将其作为 props 传入视图层组件以显示信息：

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

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

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

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

基于 ID 更新一行

当使用者提交一个表格更新的操作，我们需要向后端传递 ID 和新数据。我们需要生成与 PUT API 路由相对应的 saga worker。关键操作如下所示。

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

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

同时，我们需要实现一个表单来允许使用者编辑一行的信息。在提交更新请求后，我们可以使用 Promise 来使页面重定向到详细页面或列表。具体实现如下所示：

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

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

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

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

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

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

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

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

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

删除特定 ID 的行

最后，我们需要在视图层中提供一个按钮，可以触发发送一个 DELETE 请求，用于删除某一行。当 API 返回“成功”后，页面应该重新定向到列表页。

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

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

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

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

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

结论

在本文中，我们介绍了如何使用 redux-saga-crud-service 模块来快速生成 Redux-Saga 应用程序的 CRUD 全套操作。我们编写了一个示例应用，该应用演示了如何实现“获取表格数据”、“获取一个数据”、“更新一个数据”和“删除一个数据”这四种操作，以及如何生成相应的 Redux state、reducer、saga-worker 和 router。

我们希望这篇文章能够为初学者提供一定的指导，借助 redux-saga-crud-service 的力量可以轻松完成 CRUD 相关操作。

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

阅读全文

猜你喜欢

  • npm 包 @nhz.io/pouch-db-manager 使用教程

    介绍 @nhz.io/pouch-db-manager 是一款基于 PouchDB 的数据库管理包，可帮助前端开发人员进行数据库的操作和管理。该包提供了诸如创建、删除、查询等常见操作，简化了数据库的使...

    3 年前
  • npm 包 add-testflight-user 使用教程

    在前端开发中，许多项目需要与 TestFlight 进行集成和测试。而 add-testflight-user 这个 npm 包就可以方便地将用户添加到 TestFlight 中进行测试。

    3 年前
  • npm 包 @simplrjs/azure-storage-backup 使用教程

    随着云计算的普及，云存储已经成为了一个非常流行的选项。Microsoft Azure Storage 提供了一种高效的云存储解决方案，但是备份数据并保证其安全性一直是一个问题。

    3 年前
  • NPM 包 yoctoevent 使用教程

    前端的开发者或许都用过或至少听说过 NPM。NPM 是一种包管理器，可以方便地安装、发布、共享和搜索包。在前端开发中，我们常常需要使用外部的包，比如常见的 jQuery、React 和 Vue 等。

    3 年前
  • npm 包 audio-decode-wasm 使用教程

    前言 在前端开发中，音频处理是一个常见的需求，如何高效地解码音频数据成为了开发者关注的焦点。npm 包 audio-decode-wasm 是一个快速的音频解码库，采用 WebAssembly 的方式...

    3 年前
  • npm包hyper-alt-click使用教程

    如果你经常使用 VS Code 或者是 Sublime Text 等编辑器，相信你也一定经常使用鼠标右键复制、粘贴的操作。但是当你需要多个文件来回跳转，这往往是一个十分麻烦的操作。

    3 年前
  • npm 包 paper-password 使用教程

    随着现代社会的数字化，互联网已经成为人们生活中必不可少的一部分。为了保障用户的信息和资料的安全，有必要对用户密码进行更好的保护。而 npm 包 paper-password 正是针对这个问题提供了一个...

    3 年前
  • npm 包 print-date-webpack-plugin 使用教程

    前言 作为前端开发人员，在日常工作中，我们经常需要使用 webpack 这样的构建工具来打包我们的代码。然而，在项目日益复杂并且需要频繁的测试、部署的情况下，手动打包代码无疑成为了一个大问题。

    3 年前
  • npm 包 google-sheets-data 使用教程

    前言 作为前端开发人员，我们面临全球无数的开源项目、工具与框架。其中，npm 包是前端工程师不可或缺的组成部分。今天，本文将介绍一个 npm 包 google-sheets-data 的使用教程，希望...

    3 年前
  • npm 包 molibox-t 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来完成我们的工作，而 molibox-t 是一个非常实用的开源 npm 包，主要用于实现移动端页面的布局和样式，同时也提供了一些实用的组件。

    3 年前
  • npm 包 graphql-anywhere-mongodb 使用教程

    什么是 GraphQL 和 MongoDB GraphQL 是由 Facebook 开发的一种数据查询和操作语言，它允许客户端精确地指定需要哪些数据，而不必依赖服务器的决定。

    3 年前
  • npm 包 molibox-icon 使用教程

    介绍 molibox-icon 是一个基于 React 的开源图标库，在使用上非常方便。其提供了一系列图标，可以直接在项目中使用。 安装 使用 npm 进行安装: --- ------- ------...

    3 年前
  • npm 包: platzom-kevin 使用教程

    在前端开发中，常常会遇到需要对字符串进行转换的任务，例如将字符串的首字母大写、将字符串反转等等。在 JavaScript 中，虽然本身就提供了一些内置函数来完成字符串转换，但是 npm 上也有很多字符...

    3 年前
  • npm 包 node-module 使用教程

    简介 npm(Node Package Manager) 是 Node.js 的包管理器，提供了很多优秀的第三方模块。在前端开发中，我们通常使用 npm 来管理项目中的库和依赖。

    3 年前
  • npm 包 quadrigacloud 使用教程

    在前端应用开发中，为了方便快捷地引用第三方库，npm 已经成为了必不可少的工具。而在众多的 npm 包中，quadrigacloud 也是一个非常实用的库，它提供了一些灵活而强大的工具来解决一些日常繁...

    3 年前
  • NPM包redux-nestprops-reducer使用教程

    在Web应用程序开发中，Redux已成为管理状态管理的首选技术栈之一。Redux提供了统一应用程序状态的一种方法，并且让我们通过使用reducers来处理应用程序状态上的更改。

    3 年前
  • npm 包 Refast-Logic-Render 使用教程

    前言 Refast-Logic-Render 是一个基于 React 的状态管理库，用于实现前端应用中的数据管理，视图渲染等功能。该库使用起来简单，可以提高应用程序的开发效率，同时可以减少开发过程中出...

    3 年前
  • npm包"read-as-buffer"使用教程

    npm 是一个包管理器，它允许我们在项目中安装，更新和卸载各种包。read-as-buffer 是一个很有用的 npm 包，它能够将不同类型的文件读取为 buffer 格式。

    3 年前
  • npm 包 serve-static-server 使用教程

    介绍 serve-static-server 是一个基于 Node.js 的模块，在 Web 开发中常用于快速搭建本地静态服务器以供开发调试和测试使用。它可以将指定目录下的静态文件（包括 HTML、C...

    3 年前
  • npm 包 simple-validate-object 使用教程

    在前端开发中，数据校验是非常重要的一部分。而 npm 包 simple-validate-object 能够提供一种简单且易用的数据检验方案，快速有效的帮助开发者进行数据校验，提升代码可靠性和稳定性。

    3 年前

相关推荐

    暂无文章