npm 包 redux-action-handlers 使用教程

如今，在前端开发领域，Redux 已经成为了不可或缺的一个状态管理框架。在 Redux 中，reducer 所扮演的角色非常重要，而 reducer 的可复用性则取决于是否能够合理地归纳 action，这就需要合适的 action 处理方式。

而 npm 包 redux-action-handlers 很好地解决了这个问题，本文将详细介绍这个包的使用方法。

安装

通过 npm 可以直接安装这个包：

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

功能

使用 redux-action-handlers，可以更为优雅地处理 Redux 的 action，提高代码的可读性和可维护性。

使用该包，我们可以给每一个 reducer 注册 handler。当一个 action 使用 reducer 处理时，会根据 action.type 查找该 reducer 已注册的 handler。Handler 执行完成后会返回一个新的 state 对象。

在 redux-action-handlers 中，一个 Handler 主要由以下两个部分组成：

  • 接受一个 state 对象和 action 对象作为参数，并返回一个新的 state 对象。
  • 匹配一个特定的 action.type 对象。

用法

在全局 store 中引入 redux-action-handlers：

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

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

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

在对应的 reducer 中，我们可以注册并处理对应的 action：

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

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

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

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

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

正如上面的代码，我们可以看到，只要简单地给 reducer 注册对应的 handler，无需针对每个 action 编写特定的 switch 语句，就可以更加优雅地获取到对应的 state。

示例

下面是一个完整的示例代码：

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

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

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

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

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

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

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

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

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

在对应的 actions 文件中，我们定义了两个 action：

  • FETCH_POSTS_REQUEST：当我们需要获取文章列表时，就可以发送这个 action
  • FETCH_POSTS_SUCCESS：当列表请求成功时，返回成功 action，并写入新的文章列表数据

在对应的 reducer 文件中，注册相应的 handler：

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

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

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

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

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

最后，我们可以在我们的组件中，触发对应的 action：

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

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

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

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

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

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

通过以上代码，我们可以快速在组件中获取到对应的状态，并进行相应的操作。

总结

redux-action-handlers 包不仅使得我们可以更加优雅地处理 Redux 的 action，同时也能提高代码可读性和可维护性。希望本文对于大家使用该包具有指导意义。

参考资料

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

阅读全文

猜你喜欢

  • npm 包 pomelo-node-client-websocket 使用教程

    前言 在前端开发中，我们经常需要与后端建立实时的通信连接。pomelo-node-client-websocket 是一款通过 WebSocket 与 pomelo 服务器进行通信的 npm 包，它提...

    2 年前
  • NPM 包 bzgyde-platzom 使用教程

    简介 bzgyde-platzom 是一个处理西班牙语字符串的 npm 包。它可以对字符串进行不同的转换，例如去除所有元音字母、在单词结尾加上“ño”等。 本教程将指导你如何使用该 npm 包来处理字...

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

    在前端开发中，使用各种 npm 包可以帮助我们更快地构建 Web 应用程序。本文将介绍一个常用的 npm 包 react-bundle-util，它可以帮助我们更好地管理和优化 React 组件的导入...

    2 年前
  • npm 包 wedeploy-middleware-unstable 使用教程

    wedeploy-middleware-unstable 是一个 npm 包，它是由 WeDeploy 团队创建的基于 Express 的中间件，专注于构建 Web 应用程序中的不稳定性测试套件，可以...

    2 年前
  • npm 包 sqsp 使用教程

    SQSP 是一款便捷的前端样式快速开发工具，它可以快速地生成一些常用的页面组件，并提供了丰富的样式和交互功能，帮助前端开发人员快速搭建美观实用的页面。 本文将介绍 SQSP 的基本使用方法以及常用功能...

    2 年前
  • npm 包 @angular-librarian/angular-dashboard 使用教程

    随着前端技术的发展，Angular 框架已成为前端界的热门之一。而在 Angular 中，组件库和面板越来越重要，因为它们可以帮助我们快速地构建一个功能强大的应用程序。

    2 年前
  • npm 包 angular-alternative-validation 使用教程

    在前端开发中，表单验证是必不可少的一项功能。而 AngularJS 是一款相当流行的 JavaScript 框架之一，它提供了一些内置的表单验证指令。但是，有时候内置的验证指令不能满足需求，这时候我们...

    2 年前
  • npm 包 lenz-brush 使用教程

    在前端开发中，有很多关于绘图和画布的需求，我们可以使用一些画笔库来实现。今天，我们主要介绍一款叫做 lenz-brush 的 npm 包，它是一个轻巧可定制的画笔库，适用于在 HTML5 Canvas...

    2 年前
  • npm 包 vue-pure-slider 使用教程

    vue-pure-slider 是一款基于 Vue.js 的轻量级滑块组件库。它非常易于使用，提供了多种自定义配置选项，能够轻松地集成到现有 Vue.js 项目中。

    2 年前
  • npm 包 allkey 使用教程

    在前端开发过程中，我们常常需要使用键值对的形式来管理一些常量或者配置项。然而，如果这些键值对的数量非常大，手动编写和维护显然是不现实的。这时候，一个好的 npm 包就可以帮助我们节省许多时间和精力。

    2 年前
  • npm 包 expired-storage 使用教程

    在前端开发中，我们常常需要在浏览器端进行本地存储。而 localStorage 和 sessionStorage 这样的 API 提供了一些基本的功能，但是它们都没有提供在存储时设置过期时间的选项。

    2 年前
  • npm 包 fullcontact-card-reader 使用教程

    在日常工作中，我们经常会遇到需要处理名片的情况。而手动输入大量的名片信息则是一件非常耗时费力的事情。因此，使用名片识别技术可以大大提高工作效率。fullcontact-card-reader 是一款基...

    2 年前
  • npm 包 rc-cut 使用教程

    在前端开发中，经常需要对文本进行裁剪。npm 包 rc-cut 可以帮助我们方便地实现这个功能。本文将介绍如何使用 rc-cut 包以及包内的 API。 什么是 rc-cut? rc-cut 是一个基...

    2 年前
  • npm 包 generator-team-services-extension 使用教程

    简介 npm 是目前最流行的 Node.js 包管理工具，可以方便地从集中的库中查找和安装开发所需要的模块和框架。在前端开发中，使用 npm 可以使项目结构更加清晰，模块化程度更高，开发效率也更高。

    2 年前
  • npm 包 norder 使用教程

    引言 随着现代化前端开发的广泛应用，前端开发工具和框架也不断涌现，npm 作为一个非常有用的包管理工具，受到了广泛的使用。norder 是一个基于 npm 的包，可以让你更好地控制你的代码库，提高代码...

    2 年前
  • npm 包 react-native-circle-image 使用教程

    React Native 是一款十分流行的跨平台移动应用开发框架，许多开发者在使用它构建高性能、可维护的移动应用。而 npm 包 react-native-circle-image 则是一个非常实用的...

    2 年前
  • npm 包 ribosomejs 使用教程

    在前端开发中，我们经常需要解决重复性的、模板性的问题，有时候通过手写可读性差，易出错，在维护时也不方便。此时，一个好用的工具就派上用场了，那就是 ribosomejs。

    2 年前
  • npm 包 vbb-sort-lines 使用教程

    介绍 vbb-sort-lines 是一个简单易用的 npm 包，它能够帮助前端工程师快速对文本内容进行排序操作。这个包通常用于处理读取文件时的文本排序需求，如将原始的文件按行排序，或是按某个关键字对...

    2 年前
  • npm 包 hexidave-uniforms-material 使用教程

    在 Web 开发中，前端框架无疑是我们必须掌握的技能之一。其中，Uniforms 是一个十分强大的表格与表单框架，具有高度定制性和易用性。如果你使用 Uniforms 进行开发，hexidave-un...

    2 年前
  • npm 包 ci-form 使用教程

    随着前端开发的快速发展，我们需要越来越多的工具来简化我们的工作流程。ci-form 是一个功能强大的 npm 包，它可以为我们提供一个易于使用的表单验证库，同时也支持自定义验证规则和错误信息。

    2 年前

相关推荐

    暂无文章