npm 包 redux-subs 使用教程

前言

在现代前端应用开发中,状态管理是一个非常重要的部分。redux 是一个常用的状态管理库,但是 redux 的使用有些繁琐。为了减轻 redux 的使用难度,社区中出现了很多辅助库,比如 redux-thunk、redux-saga 等等。其中有一个比较新的库 redux-subs,它可以帮助我们更方便地管理异步数据请求。

安装

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

使用

引入

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

使用 subscribe 注册

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

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

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

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

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

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

API 介绍

subscribe

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

subscribe 是用于注册一个异步数据请求的函数,subscribe 函数中有两个参数:

  • asyncSubscriber,异步函数:需要请求数据的异步函数,具体参数可以看 SubscribeParam 声明。
  • options,可选参数:是一个可选项,具体见 SubSubscribeOptions 声明。
-- -------------- ----
---- -------------- - -
    --------- ---- -- ----- -------- --
    --------- ---- -- ----- -------- --
    -------------- ------- -- --------------------------------------
    ------------ -- -- ----- -- ----
    -------------- ----- ------- -- --- -- ----------
--

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

unsubscribe

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

unsubscribe 是用于取消注册异步数据请求的函数,需要传入一个配置对象 options,其中 key 是注册数据请求时的 key。

initSubStore

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

initSubStore 是用于初始化 sub store 的函数,用于注册数据请求的状态。需要传入一个 store 对象,类型为 redux 中的 store,同时可以附带配置项:

  • refreshAll:默认为 false,是否刷新所有数据请求。

getStateSlice

getStateSlice 是用于获取指定 sub state。

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

参数说明:

  • name:数据请求的名称,必须是注册时传入的名称。
  • action:获取后的数据需要经过 reduce 处理,action 形式进行处理,如果不传,则直接获取 state(开发不建议使用)。

示例

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

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

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

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

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

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

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

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

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

总结

redux-subs 可以让我们更简单的进行异步数据处理,有了 redux-subs,我们可以专注于我们的业务逻辑,而无需为复杂的 redux 状态管理花费太多时间和精力。希望本文能对你掌握 redux-subs 的使用有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005671c81e8991b448e3779


猜你喜欢

  • npm 包 mc-tool 使用教程

    前言 开发一个 Web 应用可能需求的代码量非常庞大,因此我们需要帮助自助减轻开发的负担。npm 是目前流行的 Javascript 包管理工具,通过 npm 我们可以引入大量的第三方库,这些库能够辅...

    3 年前
  • npm 包 react-native-filesystem-v1 使用教程

    简述 在 React Native 开发中,我们经常需要在本地存储或读取一些文件,例如缓存数据、日志记录等。react-native-filesystem-v1 是一个帮助我们访问文件系统的库,支持 ...

    3 年前
  • npm 包 lab15-svalidated-form 使用教程

    简介 lab15-svalidated-form 是一个前端开发常用的表单校验工具包。它的功能十分强大,可以帮助我们轻松、快速地完成表单数据的校验工作,避免了繁琐、重复的校验操作,从而提高了开发效率。

    3 年前
  • npm 包 ngx-fx 使用教程

    ngx-fx 是一个 Angular 动画库,它提供了多种动画效果,可以轻松地在 Angular 项目中使用。本文将为大家介绍 ngx-fx 的使用方法,包括安装、基本用法、高级用法等。

    3 年前
  • npm 包 nodejs-svn 使用教程

    什么是 nodejs-svn? nodejs-svn 是一个 NPM 包,旨在提供一个简单的接口和一些工具函数来管理和交互 SVN 仓库。它是建立在 Node.js 之上的,因此,它可以在任何支持 N...

    3 年前
  • npm 包 primitive-circle 使用教程

    primitive-circle 是一款优秀的 npm 包,它可以帮助前端开发人员快速生成简单的圆形图形。在本文中,我们将详细介绍 primitive-circle 的安装和使用方法,并附带一些代码示...

    3 年前
  • npm包啊!

    npm包是前端开发中不可或缺的一环。其中,ajoslin-rehype-javascript-to-bottom是一个非常实用的npm包,它可以帮助我们将JavaScript脚本移动到HTML文档底部...

    3 年前
  • npm 包 lw-modal 使用教程

    在前端开发中,经常需要使用弹窗对话框来实现一些交互效果。而 lw-modal 就是一款非常好用的弹窗插件,它可以帮助我们快速构建弹窗效果,减少重复的代码编写工作,提高开发效率。

    3 年前
  • npm 包 node-red-contrib-predix-apm-alerts 使用教程

    在前端开发中,我们常常需要使用一些插件或者依赖来提高我们的效率。其中,npm 包是常用的前端工具之一。在本文中,我将向大家介绍如何使用 npm 包 node-red-contrib-predix-ap...

    3 年前
  • npm 包 amx-ftp 使用教程

    amx-ftp 是一个基于 Node.js 的 FTP 客户端,可以用于上传、下载以及删除 FTP 服务器上的文件和文件夹。在前端开发中,经常需要用到上传和下载文件的操作,而 amx-ftp 可以很方...

    3 年前
  • npm 包 ndepcmp 使用教程

    前言 在前端开发中,使用 npm 管理依赖包已经成为事实上的标准。但是,在项目中使用的依赖包可能会存在冗余和重复,这会增加代码库的体积和加载时间。如何检测和清理这些冗余的依赖包是一个很有必要的技能。

    3 年前
  • npm 包 homebridge-plantower 使用教程

    在智能家居设备的潮流中,室内空气质量监测器越来越受欢迎。而在室内空气质量监测器中,Plantower 空气质量监测器是广受欢迎的一种。借助于 npm 包 homebridge-plantower,我们...

    3 年前
  • npm 包 buche-tools 使用教程

    前言 前端开发中,我们经常需要生成一些报告、文档或简单的交互式演示。为了方便实现这些功能,npm 包 buche-tools 提供了一种快速简便的方式。 在本文中,我们将介绍 buche-tools ...

    3 年前
  • npm 包 jquery-slim-webpack 使用教程

    前言 NPM 是一个非常流行的包管理器,可以用于管理 JavaScript 库和工具。其中一个常用的 JavaScript 库是 jQuery,它提供了一组优秀的 API,可以轻松地完成 DOM 操作...

    3 年前
  • npm 包 fist-js 使用教程

    在前端开发中,为了提高开发效率和满足特定场景的需求,我们通常会使用很多第三方库。而这些第三方库通常会以 npm 包的形式发行,方便我们通过 npm 安装和使用。今天我们将介绍一个 npm 包——fis...

    3 年前
  • npm 包 vsc-convert-ftp 使用教程

    前言 在前端开发过程中,经常需要将本地代码上传至服务器上。这时候通常需要通过 FTP 软件将本地代码上传至服务器,但是这种方式可能会比较麻烦,并且需要手动操作。为了提高效率,我们可以使用 npm 包 ...

    3 年前
  • npm 包 react-native-search-bar-tst 使用教程

    react-native-search-bar-tst 是一个 React Native 的搜索组件库,它提供了一个可定制的搜索条,具有高度的灵活性和用户友好性,允许您轻松地集成到您的应用程序中。

    3 年前
  • npm 包 xceling-session 使用教程

    在前端开发中,session 是非常重要的一个概念,它用以保存客户端与服务器交互过程中需要存储的会话数据。常常我们会使用一些 npm 包来帮助我们管理 session,xceling-session ...

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

    前言 在现代前端开发中,npm 包的重要性不言而喻。除了常用的一些基础库,还有一些常常用到的工具包,比如 freewind-cli。 freewind-cli 是一个命令行工具,简化了前端开发中的许多...

    3 年前
  • npm 包 @gitpad/rlist-view 使用教程

    介绍 @gitpad/rlist-view 是一个基于 React 的组件库,它提供了一种类似瀑布流的列表展示方式,支持可加载更多、滚动加载等功能。同时,它还提供了丰富的配置选项,以及灵活的扩展方式,...

    3 年前

相关推荐

    暂无文章