NPM 包 redux-normalized-api-middleware 使用教程

在前端开发中，API 及其返回数据通常需要经过处理和管理。redux-normalized-api-middleware 就是一款解决 API 数据处理和规范化的工具，能够有效地管理和规范前端项目的数据。

安装

使用 npm 进行安装：

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

使用方法

  1. 引入 redux-normalized-api-middleware：
------ ------------------- ---- ----------------------------------
  1. 传入一些配置项，返回一个中间件：
----- ------------- - ---------------------
  ---- --------------
  -------- ------------------
  ------- ------
  ------ --------- -------- ---------
  ------- ---------------
  -- --------
---
  1. 在 redux 中将该中间件注册到 applyMiddleware 中：
------ - ------------ --------------- - ---- --------

----- ----- - ------------
  ------------
  ------------------------------
--
  1. 在 action 中调用中间件：
------ - ------------ - ---- ----------------

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

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

上述代码中的 options 可以包含查询参数、请求体等信息，根据传入 options 发送不同的 API 请求。

  1. 在 reducer 中处理成功和失败的 action，并更新 state：
------ - ------------- - ---- ----------------

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

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

深入探讨

  1. middleware 在整个 redux 中的位置

在 redux 经历 action → middleware → reducer 的流程时，middleware 就是中间过程的处理者。middleware 可以在不改变 action 的原始形式和 reducer 的处理逻辑的基础上，实现不同的业务需求，比如请求和处理 API 数据。

  1. 如何使用 reducer 处理 normalized data

createApiMiddleWare 方法中的 schema 参数可以用来对返回的数据进行规范化，这样的话在 reducer 中就可以更方便地处理经过规范化后的数据了。

例如，在 reducer 中存储的数据格式是：

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

那么希望获取的数据是这种格式：

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

可以使用 normalizr 库将数据进行规范化：

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

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

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

schema 参数支持 normalizr 所支持的所有 schema 类型，可以实现更灵活的数据规范化。

示例代码

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

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

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

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

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

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

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

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

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

结语

redux-normalized-api-middleware 可以有效地减少前端项目中 API 数据的重复处理，规范化数据的格式，在项目中大大提高了数据的处理和管理效率，值得开发人员掌握。

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

阅读全文

猜你喜欢

  • npm 包 webpack-entry-html-plugin 使用教程

    在 Web 开发中，前端工程化已经成为了必不可少的部分，对于前端工程化的工具，webpack 可以说是最受欢迎的。随着前端项目变得越来越复杂，webpack 的插件体系也越来越完善。

    4 年前
  • npm 包 webpack-entries-plugin 使用教程

    在前端开发中，Webpack 是一个非常重要的工具之一，它可以打包多个 JavaScript 模块，处理各种资源文件，使前端开发更加高效和便捷。而其中的 webpack-entries-plugin ...

    4 年前
  • npm 包 webpack-entry 使用教程

    随着前端应用的复杂度越来越高，模块化打包成为了前端工程化的必要技能。而 webpack 是目前前端最常用的模块化打包工具之一。然而，在实际项目中，尤其是多页面应用的情况下，如何管理多个页面的入口文件，...

    4 年前
  • npm 包 weblo 使用教程

    Weblo 是一个基于 Node.js 的开源 Web 框架，它具有高度的易用性、稳定性和灵活性。它采用了类 Flask 的路由解析方式，同时支持基于异步的控制器和视图的编程。

    4 年前
  • npm 包 webload 使用教程

    在前端开发中，优化网页性能是非常重要的一项工作。其中，网页加载速度是影响用户体验的关键因素之一。因此，我们需要使用一些工具来对网页性能进行优化。今天，我要介绍一种可以帮助我们提高网页加载速度的工具——...

    4 年前
  • npm 包 webloader 使用教程

    什么是 webloader？ Webloader 是一个前端模块加载器，它可以让你通过简单的配置，定义模块依赖关系并自动加载依赖模块，从而使得前端代码的管理更加清晰、简单，可以有效提高开发效率。

    4 年前
  • npm 包 webloc-parser 使用教程

    前言 在网页开发中，经常会遇到需要解析网站 URL 的需求，而 webloc-parser 就是一个能够解析 .webloc 文件的 npm 包。本篇文章将详细介绍 webloc-parser 的使用...

    4 年前
  • npm 包 weblocalizr 使用教程

    在前端开发过程中，我们经常需要对网站进行国际化，即在不同的语言环境下呈现不同的内容。这时候就需要使用一个工具来帮助我们实现这个功能。weblocalizr 就是这样一个工具，它是一个支持国际化的 np...

    4 年前
  • npm 包 weblog-ad 使用教程

    什么是 weblog-ad？ weblog-ad 是一个为博客、个人网站等网站添加广告的 npm 包。通过在网站中添加广告，可以有效地为网站带来收益。 安装和使用 安装 使用 npm 安装： np...

    4 年前
  • npm 包 weblog-backend 使用教程

    前言 在前端开发的过程中，我们通常需要在后台搭建一个日志系统，用于记录用户操作和程序运行情况。weblog-backend 是一个基于 Node.js 平台的日志系统后端包，它提供了快速搭建日志系统的...

    4 年前
  • npm 包 weblog-bot 使用教程

    概述 在前端开发过程中，记录日志是非常重要的。为了提高生产效率，我们可以使用一些自动化工具自动记录日志。本文介绍的 npm 包 weblog-bot 就是一个自动记录前端日志的工具。

    4 年前
  • npm 包 webpack-env 使用教程

    在前端领域中，构建工具是不可或缺的一部分。其中，webpack 是一个非常流行的构建工具，它可以将多个静态资源文件打包成一个文件，并且支持代码拆分、按需加载、热更新等功能。

    4 年前
  • npm包weblinks 使用教程

    什么是npm包weblinks？ npm是一个Node.js软件包仓库，用于公开共享JavaScript软件包的提供和安装。其中，weblinks是一款可以在终端上快速访问和打开网页链接的npm包。

    4 年前
  • npm 包 weblint 使用教程

    什么是 weblint weblint 是一款基于 Node.js 的代码质量检测工具，主要用于检测 JavaScript、CSS、HTML 等 Web 相关技术的代码规范性、易读性以及安全性等问题，...

    4 年前
  • npm 包 webpack2-externals-plugin 使用教程

    在前端开发中，我们经常需要使用到打包工具，例如 webpack。而在某些情况下，我们可能需要将某些第三方库从打包文件中排除，以此来减小文件体积和对页面加载速度进行优化。

    4 年前
  • npm 包 webcomponent-mdl 使用教程

    前端开发中，我们经常使用 web component 技术来构建网站页面。而 Material Design Lite (简称 MDL) 是 Google 所推出的一套 Material Design...

    4 年前
  • 使用 npm 包 webcomponents-loader

    在前端开发中，web components 是一种可复用的、封装好的组件，可以用来构建当今最好的 web 应用程序。然而，我们要使用 web components，需要在项目中引入其中很多库和框架，比...

    4 年前
  • npm 包 webconfig-parser 使用教程

    介绍 webconfig-parser 是一个用于解析 web 应用程序的配置文件的 npm 包。该包支持常见的配置文件格式，如 XML、JSON、YAML 等。此外，webconfig-parser...

    4 年前
  • npm 包 webpack-error-notification 使用教程

    在进行前端开发中，我们不可避免地会遇到各种各样的错误。而当我们使用 webpack 构建应用时，使用了一些错误的配置或者代码，就会产生一系列错误信息。这时候，如果能够及时地得到提示，就可以快速定位和解...

    4 年前
  • npm 包 webpack-eslint-plugin 使用教程

    在 Web 开发中，我们经常会使用 Webpack 这个工具对 JavaScript 代码进行打包。同时，为了保证代码质量和风格一致，我们也需要使用 ESLint 对代码进行检查。

    4 年前

相关推荐

    暂无文章