npm 包 @nll/ngrxtras 使用教程

介绍

在 Angular 应用中，使用 ngrx 管理应用状态是非常方便和必要的。ngrx 是一个基于 Redux 架构的状态管理库，但是使用起来却比原生的 Redux 更加简便。@ngrx/store 是 ngrx 的核心库，它提供了一个基于 RxJS 的数据流管理机制。但是，有时候我们还需要更多的功能，比如异步操作、批量操作、状态持久化等。这时候，@nll/ngrxtras 就显得尤为重要。

@nll/ngrxtras 是一个基于 @ngrx/store 的功能增强库，它提供了以下功能：

  • 支持异步操作和批量操作
  • 支持管道操作符
  • 支持状态持久化和恢复

在本文中，我们将详细介绍 @nll/ngrxtras 的使用，帮助大家更好地使用 ngrx 管理应用状态。

安装

首先，我们需要在项目中安装 @nll/ngrxtras。可以使用 npm 安装：

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

@nll/ngrxtras 需要一些 rxjs 操作符，所以我们还需要安装它们：

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

使用

基本用法

首先，我们需要在应用中引入 @ngrx/store 和 @nll/ngrxtras：

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

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

StoreExtrasModule 是 @nll/ngrxextras 的主模块，我们需要将它添加到应用的 imports 中。

然后我们使用 createAction 函数创建 Action，接着定义 reducer 和 effects：

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

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

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

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

这段代码与原生的 ngrx 代码相比，并没有太大的区别。需要注意的是，在 increment effect 中我们使用了 action$ 和 batch$ 操作符。这两个操作符都是 @nll/ngrxextras 中提供的。

  • action$ 可以在 takeUntil 中使用，来取消某个操作或一些操作。
  • batch$ 可以在多个操作之间建立批量操作。

action$ 和 batch$ 在使用上都可以像正常的 Action 一样使用，但是它们是 Observable，所以在使用时需要使用 ofType 操作符进行筛选。

状态持久化

@nll/ngrxextras 也提供了状态持久化和恢复的功能。如果我们希望在应用关闭时保存状态，并在下次打开时恢复状态，可以使用 ngrxPersistStore 函数：

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

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

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

ngrxPersistStore 接收 Store 和配置参数 persistConfig，其中 storage 表示持久化存储使用的工具，可以是 localStorage、sessionStorage 或 自定义的工具类。

管道操作符

@nll/ngrxextras 还提供了一些管道操作符。我们可以在 Store 或 Effect 中使用这些操作符。下面是一些常见的操作符：

  • switchMapTakeUntil：将 takeUntil 与 switchMap 结合使用。当触发 takeUntil 时，会取消 switchMap 中的 observable。
  • takeUntilDelayError：将 takeUntil 与 delay 和 catchError 结合使用。当 catchError 返回一个 Observable 时，会等待 delay 时间后再终止 observable。
------ - ---------- - ---- ----------------
------ - -------- ------- ------------ - ---- ----------------
------ - ------------------- ----------- ------------------- - ---- ------------------
------ - --- - ---- -----------------
------ - ---------- - ---- --------------

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

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

示例代码

下面是一个简单的计数器应用，使用 ngrx 和 @nll/ngrxextras 来管理状态。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

@nll/ngrxextras 是一个非常好用的 ngrx 库。它提供了很多常用的功能增强，比如支持异步操作，批量操作，状态持久化等。同时，它还提供了一些管道操作符，可以让我们更方便地使用 ngrx。

在使用 @nll/ngrxextras 时，需要注意 action$ 和 batch$ 操作符的使用，以及需要引入一些观察者操作符。同时，也需要注意 ngrxPersistStore 函数需要在 Store 初始化后调用。

希望本文能够帮助大家更好地使用 @nll/ngrxextras 和 ngrx 来管理应用状态。

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

阅读全文

猜你喜欢

  • npm 包 gulp-add-host 使用教程

    简介 当我们开发或者调试前端项目的时候，经常需要在本地服务器上进行开发调试。在这个过程中，我们可能需要将主机名配置为特定的值，以便在本地服务器环境中进行操作。 此时，我们就需要使用一个 npm 包——...

    3 年前
  • npm 包 gv-select 使用教程

    前言 随着前端技术的发展，如今我们已经可以使用各种 npm 包来快速构建复杂的前端应用。在这篇文章中，我们将会介绍一款名为 gv-select 的 npm 包，它可以让我们在网站中轻松地实现下拉框选择...

    3 年前
  • NPM包 hemera-neo4j-store 使用教程

    在 Node.js 开发中，NPM 包已经成为了一个非常重要的部分，它可以让开发者更加方便快捷地使用别人的代码。其中，hemera-neo4j-store 是一个专为 Hemera 框架设计的 neo...

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

    简介 Node-wretch 是一个基于 fetch 封装的轻量级前端 HTTP 客户端，它提供了链式调用、拦截器、超时和错误处理等功能，使得我们可以更加便利地发起 HTTP 请求并处理响应。

    3 年前
  • npm 包 react-native-file-chooser 使用教程

    简介 react-native-file-chooser 是一个 React Native 的 npm 包，使用它可以在 React Native 应用中实现文件选择功能。

    3 年前
  • npm 包 btc-fee 使用教程

    简介 btc-fee 是一个用于计算比特币交易矿工费的 npm 包。它可以帮助开发者更加方便地计算交易矿工费，提高交易效率和体验。 安装 使用 npm 命令进行安装： --- ------- ----...

    3 年前
  • 前端技术文章：npm包zhu-date-picker使用教程

    随着现代网站的复杂性不断增加，前端工程师越来越需要使用各种工具和库简化他们的工作流程。而 npm 是前端社区中一个非常受欢迎的包管理器，通过使用它，您可以轻松地安装和管理各种前端工具和快速地集成到您的...

    3 年前
  • npm 包 cctalk-devices 使用教程

    本文介绍如何使用 npm 包 cctalk-devices，该包提供了一个方便的方式来与 cctalk 设备进行通讯。本文将深入介绍该包的使用方法，包括如何进行安装、使用、以及一些实际应用场景的示例...

    3 年前
  • npm 包 area-logger 使用教程

    area-logger 是一个基于 Node.js 和 npm 的日志记录库。它可以安装在前端项目中，用于快速、简便地在代码中使用日志记录功能，方便调试和测试。本文将详细介绍 area-logger ...

    3 年前
  • npm 包 mosca-memory 使用教程

    npm 是一个 node.js 的包管理器，在前端开发中广泛应用。mosca-memory 是一种轻量级的基于内存的 MQTT 代理，用于快速构建 MQTT 应用。

    3 年前
  • npm 包 @jackfresh/redux-form-material-ui 使用教程

    什么是 @jackfresh/redux-form-material-ui @jackfresh/redux-form-material-ui 是一个开源的 npm 包，它提供了一个适用于 React...

    3 年前
  • npm 包 gister-cli 使用教程

    介绍 gister-cli 是一款基于 Node.js 的命令行工具，能够方便快捷地创建 Gist 并将代码粘贴到 Gist 中。gister-cli 使用 GitHub API 实现，安装和使用非常...

    3 年前
  • npm 包 ng2-select-exposit 使用教程

    ng2-select-exposit 是一款基于 Angular 2+ 的下拉列表组件，它允许用户从一组选项中选择一个或多个选项。该组件可以自动搜索选项，并支持添加自定义选项。

    3 年前
  • npm 包 Measures 使用教程

    在前端开发中，我们经常需要对页面元素的大小、位置等进行计算和验证。此时，我们通常可以使用浏览器中提供的开发者工具等方式来实现，但这些方式并不足够方便和高效。因此，我们可以使用 npm 包 Measur...

    3 年前
  • npm 包 vue-modal-dialogs-ts 使用教程

    在前端开发中，对于弹出框的处理一般都需要使用到各种不同的库和框架。npm 包 vue-modal-dialogs-ts 则是一个帮助开发者处理弹出框的库。在本文中，我们将会详细讲解如何使用它来实现弹出...

    3 年前
  • npm 包 my-little-schemer 使用教程

    介绍 my-little-schemer 是一个 npm 包，它提供了一个简化版的 Scheme 语法解释器，可以用于学习函数式编程，尤其是 Lisp 和 Scheme 等方面的知识。

    3 年前
  • npm包 xchain-wallet-master 使用教程

    介绍 xchain-wallet-master是一个基于区块链技术的在线加密钱包，可以用于安全地存储数字资产，如比特币、以太坊等加密货币。它是一个npm包，可以轻松地用于前端开发。

    3 年前
  • npm 包 @clayne/react-apollo 使用教程

    前言 在开发前端应用时，经常会涉及到 GraphQL，而 Apollo Client 是处理前端 GraphQL 的主要工具之一。其中，@clayne/react-apollo 是基于 Apollo ...

    3 年前
  • npm 包 i6-driver-virtual 使用教程

    介绍 i6-driver-virtual 是一个基于 Node.js 平台的虚拟串口驱动程序。它可以在电脑上创建虚拟串口，使得我们可以通过串口通信的方式，实现串口通信的功能。

    3 年前
  • npm 包 wechat-pay-sdk 使用教程

    介绍 在前端开发中，支付功能逐渐成为了一个必须要具备的技能。而微信支付无疑是其中最为常见和重要的一种，在实现微信支付功能时使用 wechat-pay-sdk 这个 npm 包可以大大的减轻开发的难度。

    3 年前

相关推荐

    暂无文章