npm 包 redux-convenient-utils 使用教程

简介

redux-convenient-utils 是一个方便快捷地管理 Redux 状态的 npm 包。它提供了一些常用的工具函数，以及 connect 函数的封装，能够大大减少我们在 Redux 中的代码量，增加代码的可读性和可维护性。

安装

你可以使用 npm 或者 yarn 安装这个包：

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

使用

createAction

createAction(type, payloadCreator) 是 Redux 中经常用到的一个 action 创建函数的封装。我们可以使用它来快捷地创建 action。

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

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

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

createReducer

createReducer(initialState, typeHandlers) 是一个 reducer 创建函数的封装，常常可以用于 Redux 中的 reducer 的编写。

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

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

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

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

connect

connect 是 React-Redux 中的一个函数，它允许我们可以将我们的组件连接到 Redux 的 store 上。redux-convenient-utils 对它进行了进一步的封装，以做到更加方便地使用它。

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

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

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

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

示例代码

下面是一个完整的示例代码，使用了上面介绍的各种 Redux 管理状态的方式：

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

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

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

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

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

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

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

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

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

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

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

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

总结

redux-convenient-utils 是 Redux 中非常好用的一个工具函数包，它能够方便地创建 action 和 reducer，并且对 React-Redux 的 connect 函数进行了封装，使我们的代码更加简洁易读。希望这篇文章能够帮助你更好地使用它，提升开发效率。

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

阅读全文

猜你喜欢

  • npm 包 src-gen 使用教程

    在前端开发中，我们经常需要使用一些工具来辅助我们开发和设计界面，比如说生成代码和提高开发效率的工具。而今天我们要介绍的是一款 npm 包——src-gen，它可以帮助我们快速生成前端代码，提高我们的开...

    4 年前
  • npm 包 sprintly-search 使用教程

    前言 在日常的前端开发中，我们常常需要搜索和整理一些项目的历史记录，这是一个很耗费时间的过程。然而，我们可以借助 npm 包 sprintly-search 来快速地搜索 sprintly 中的项目历...

    4 年前
  • npm 包 sprintly-ui 使用教程

    介绍 Node Package Manager （npm）是 Node.js 常用的包管理工具，其中 sprintly-ui 是一个专为前端设计的 UI 包。sprintly-ui 的功能丰富，提供了...

    4 年前
  • npm 包 src-location 使用教程

    在前端开发中，我们经常会用到各种 npm 包来辅助开发，其中 src-location 就是一个非常实用的 npm 包。它可以帮助我们快速地获取项目中各个文件的绝对路径，省去了手动计算路径的麻烦。

    4 年前
  • npm 包 src-n-polyfill 使用教程

    什么是 src-n-polyfill？ src-n-polyfill 是一个用于前端开发的 npm 包，主要用于解决浏览器不支持 srcset 和 sizes 属性的问题，使得图片可以自适应地适应不同...

    4 年前
  • npm 包 src-import 使用教程

    什么是 npm 包 src-import？ npm 包 src-import 是一个能够帮助你在项目中便捷地引入模块的工具。它允许你使用相对路径引用模块，而不用去处理困扰了许多开发者的繁琐的路径问题。

    4 年前
  • npm 包 src-n-parse 使用教程

    前言 src-n-parse 是一个非常实用的 npm 包，其功能是将 URL 或者 file 路径解析成一个包含 protocol、 hostname、port、path、query、fragmen...

    4 年前
  • npm 包 sshfs 使用教程

    前言 sshfs 是基于 SSH 协议的文件系统，它可以让用户将远程主机的文件挂载到本地主机上，方便用户在本地直接操作远程文件。在前端开发中，我们经常需要操作远程服务器上的文件，如上传文件、部署代码等...

    4 年前
  • npm 包 sshfs-box 使用教程

    什么是 sshfs-box? sshfs-box 是一个基于 sshfs 的文件系统工具包，它可以帮助开发者将远程服务器上的文件映射到本地机器上的一个虚拟目录中，从而实现远程服务器上的文件访问和本地文...

    4 年前
  • npm 包 sshfs-config 使用教程

    简介 SSHFS-CONFIG 是一款 npm 包，可以帮助前端开发者管理 SSHFS 服务器配置，提高工作效率。它可以让开发者轻松地创建、编辑和删除 SSHFS 服务器配置。

    4 年前
  • npm 包 sshfsmount 使用教程

    在前端开发中，我们经常需要连接到远程服务器来处理、运行或测试代码。而 sshfsmount 这个 npm 包可以帮助我们在本地文件系统中挂载远程文件系统，从而方便地使用本地 IDE 或文本编辑器编辑、...

    4 年前
  • npm 包 sshfs-node 使用教程

    在前端开发中，我们需要与远程服务器进行文件交互来部署和管理项目。传统的方法是通过 FTP 或 SFTP 连接服务器，这种方式需要使用繁琐的命令行工具或者图形界面工具，而且存在安全隐患。

    4 年前
  • npm 包 sshkey 使用教程

    介绍 SSH（Secure Shell）是一种加密网络协议，用于在不安全的网络上安全地传输数据。SSH Key 是 SSH 认证方式之一，其由公钥和私钥组成，用于加密和解密网络通信数据。

    4 年前
  • npm 包 sprite-cli 使用教程

    前言 在前端开发中，我们经常需要使用雪碧图来优化网站或应用的性能和体验，而 sprite-cli 就是一个让我们可以更快速、更方便地生成雪碧图的命令行工具。本文将带领大家深入了解 sprite-cli...

    4 年前
  • npm 包 sprite-brunch-localvox 使用教程

    在前端开发中，我们常常需要优化网页的性能和加载速度，其中一个方案就是使用 CSS sprite 技术。 CSS sprite 技术可以减少网页的 HTTP 请求次数，从而提高网页的加载速度。

    4 年前
  • npm 包 sprite-anim 使用教程

    前言 在前端开发中，Spritesheet 技术是将多张小图片组合成一张大图，再通过 CSS 变化来展示不同的部分从而实现动画效果的一种技术。在这样的技术中，我们使用 sprite-anim 库可以更...

    4 年前
  • npm 包 sprite-css 使用教程

    在 Web 开发中，CSS sprite 技术可以用来处理图片合并和优化，从而提高页面的渲染速度和性能。然而，手动实现 CSS sprite 并不是一件容易的事情。

    4 年前
  • npm包sqrt使用教程

    在前端开发中，我们经常会用到一些数学计算的操作，包括求平方根。而这个时候，我们就可以使用一个 npm 包叫做 sqrt。这个包可以帮助我们方便地进行平方根计算，它非常易用。

    4 年前
  • npm 包 sqrt-arbitrary-precision 使用教程

    介绍 sqrt-arbitrary-precision 是一个基于 JavaScript 的 npm 包，可以用来解决小数精度问题，并实现开根号计算。使用该包，可以避免浮点数在计算机中二进制表示精度限...

    4 年前
  • npm 包 sprite-extractor 使用教程

    在前端开发中，我们经常需要将多张小图片合并成一张大图，这种操作通常被称为“雪碧图”（sprite）。手动制作一张雪碧图会比较繁琐，而使用 npm 包 sprite-extractor 可以轻松地完成这...

    4 年前

相关推荐

    暂无文章