npm 包 preact-small-redux 使用教程

在前端开发中，常常需要使用到状态管理库，目前常用的有 Redux 和 Mobx，但是它们的体积都比较大。如果项目需要用到状态管理，但是又不想引入大体积的库，那么可以使用 preact-small-redux 包。

什么是 preact-small-redux

preact-small-redux 是一个极小的状态管理库，它只有 Redux 的一小部分功能，但是比 Redux 更小。它使用 Preact 作为视图层库，因此需要先了解 Preact 的基本用法。

安装

使用 preact-small-redux 有两种安装方式，分别是直接在浏览器中引入和使用 npm 安装。

直接在浏览器中引入

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

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

使用 npm 安装

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

使用

首先，需要创建一个 Redux store，可以使用 preact-small-redux 的 createStore 方法创建。

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

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

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

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

可以看到，这里的 reducer 和 Redux 的使用方式是一样的。

接下来，在 Preact 组件中使用 preact-small-redux 提供的 connect 方法连接 store 和组件。

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

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

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

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

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

可以看到，这里的 mapStateToProps 和 mapDispatchToProps 和 Redux 的使用方式是一样的。

然后，将 ConnectedCounter 渲染到页面中。

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

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

至此，使用 preact-small-redux 实现状态管理的过程就完成了。

示例代码

完整的示例代码：

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

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

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

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

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

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

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

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

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

总结

preact-small-redux 是一个非常小巧的状态管理库，如果项目需要用到状态管理，但是又想要减小项目体积，那么可以考虑使用 preact-small-redux。同时，preact-small-redux 的使用方式和 Redux 是一样的，因此可以很快上手。

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

阅读全文

猜你喜欢

  • npm 包 gollum-auth-shell 使用教程

    介绍 gollum-auth-shell 是一个 Node.js 模块，它提供了使用 Shell 账户进行认证而不是基于 HTTP 账户的 Gollum 服务器的能力。

    2 年前
  • npm 包 annotate-icon 使用教程

    在前端开发中，有很多时候我们需要使用到一些图标来装饰我们的页面，这时我们就需要借助于 iconfont 之类的工具来实现。而 annotate-icon 就是这样一个 npm 包，它提供了许多有意思的...

    2 年前
  • npm 包 semantic-ui-calendar-disabled-date 使用教程

    在前端开发中，日期选择器是非常常见的组件。然而，有时候我们需要设置某些日期为禁用状态，例如过去的日期或某些节假日等等。在这样的情况下，我们可以使用 npm 包 semantic-ui-calendar...

    2 年前
  • NPM 包 Hyperbloom 使用教程

    在现代前端开发中，使用 NPM 作为依赖管理工具已经成为了行业标准。其中一个非常流行的 NPM 包是 Hyperbloom，它是一个快速的布隆过滤器实现，可以帮助开发者快速处理大量数据的查询和过滤。

    2 年前
  • npm 包 ebook-parser 使用教程

    简介 ebook-parser 是一个基于 Node.js 平台的 npm 包，它可以将各种电子书格式（如 EPUB、MOBI、PDF 等）转换为 HTML 或 JSON 格式，便于在网页或移动端应用...

    2 年前
  • npm 包 ng-rest 使用教程

    写在前面 ng-rest 是一个非常实用的 npm 包，它为 Angular 应用程序提供了一种易于使用的 RESTful 服务实现。本文将详细介绍该 npm 包的使用方法，包括安装，配置和使用示例。

    2 年前
  • npm 包 browserify-lessify 使用教程

    前言 在前端开发中，我们经常需要使用 CSS 预处理器来简化 CSS 的编写，比如使用 Less 或者 Sass。而在前端的模块化开发中，我们则需要使用类似于 Node.js 中的 CommonJS ...

    2 年前
  • npm包raml2objfix使用教程

    前言 随着 Web 技术的发展，前端开发领域的工具也不断涌现。其中，npm 包是前端开发不可或缺的工具之一。npm 包可以帮助开发者避免重复造轮子，提高开发效率。 其中，raml2objfix是一个非...

    2 年前
  • npm 包 nggridify2 使用教程

    nggridify2 是一个非常强大的基于 AngularJS 的表格渲染工具，能够提供一个高效、灵活的表格设计方案，该工具的优势在于其简化了表格的设计流程，允许直接接收一组数据，从而在一个 web ...

    2 年前
  • npm 包 pipe-callbacks 使用教程

    什么是 pipe-callbacks？ pipe-callbacks 是一个用于进行函数管道化处理的 npm 包。它允许我们将多个函数与数据 “串联” 在一起，以便构建更可读、修改和维护的代码。

    2 年前
  • npm 包 project-lvl1-s95 使用教程

    作为前端开发者，我们经常会使用到各种各样的 npm 包，这些包可以让我们更高效地完成我们的工作。其中，project-lvl1-s95 是一个非常有用的包，它可以帮助我们快速地生成随机数，并且可以自定...

    2 年前
  • npm 包 raml2htmlfix 使用教程

    简介 raml2htmlfix 是一个可以生成 API 文档的 npm 包，它支持将 RAML 文件转换成 HTML 文件。不仅如此，它还支持自定义主题和配置，使得生成的文档符合个性化需求，适用于不同...

    2 年前
  • NPM包steal-qunit1使用教程

    什么是steal-qunit1? StealJS是一款JavaScript模块加载器和打包器，它可以方便地管理和加载Node.js和浏览器端的模块。而steal-qunit1是基于StealJS封装的...

    2 年前
  • npm 包 Libtest1 使用教程

    介绍 在前端领域，我们常常需要使用各种库和工具来提高开发效率和代码质量。而通过 npm（Node.js 包管理器）安装的第三方模块，则成为我们开发过程中必不可少的一部分。

    2 年前
  • npm 包 plugin-node-scsstojson 使用教程

    CSS 是网页设计的重要组成部分，但是很多时候它很难被浏览器充分利用。plugin-node-scsstojson 是一个 npm 包，可以将 CSS 文件转换为 JSON。

    2 年前
  • npm 包 cici-utils 使用教程

    介绍 cici-utils 是一个前端常用工具库，提供了各种便捷的函数，涵盖了字符串处理、数组操作、日期处理、浏览器判断等功能。该工具库的主要优点包括： 函数简单易懂，提高开发效率。

    2 年前
  • npm 包 plugin-node-faker 使用教程

    简介 在前端开发中，很多时候需要用到随机生成数据的功能。而 Faker.js 是一个非常有名的第三方库，用于生成随机数据。而 plugin-node-faker 是一个基于 Faker.js 的 No...

    2 年前
  • npm 包 ts-trapper 使用教程

    介绍 ts-trapper 是一个 TypeScript 库，可以生成 TypeScript 类的跟踪代码。它可以在运行时捕获类实例上的属性读取、函数调用等操作，以便分析和调试。

    2 年前
  • npm 包 user-agent-gen 使用教程

    前言 在进行前端开发和测试过程中，我们经常需要模拟不同的浏览器和操作系统环境，以保证我们的网站在各种浏览器和设备上都能够正常运行。而浏览器和操作系统的信息，就体现在 User-Agent 字段中。

    2 年前
  • npm 包 gh-topics 使用教程

    简介 gh-topics 是一个可以从 GitHub 上获取主题和主题页的 Node.js 模块。它可以用于创建和维护一个特定主题的代码库，或者从 Github 上进行主题相关开发的其他用途。

    2 年前

相关推荐

    暂无文章