npm 包 berx 使用教程

简介

berx 是一个用于 React 应用管理状态的 npm 包。它使用 Redux 和 immer.js，使我们能够更加简单、直观地进行状态管理。

安装

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

使用方法

初始化

我们需要先引入 berx：

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

然后我们可以通过 createStore 创建一个 store：

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

在 createStore 的 options 中，我们有以下可选属性：

  • state：初始化 store 的状态。例如：
----- ----- - -------------
  ------ -
    ------ --
  --
---
  • mutations：用于修改 state 的同步函数。例如：
----- ----- - -------------
  ------ -
    ------ --
  --
  ---------- -
    ---------------- -
      --------------
    --
    ---------------- -
      --------------
    --
  --
---
  • actions：用于执行异步操作并提交 mutations 的函数。例如：
----- ----- - -------------
  ------ -
    ------ --
  --
  ---------- -
    ---------------- -
      --------------
    --
    ---------------- -
      --------------
    --
  --
  -------- -
    ---------------- ------ -- -
      ------------- -- -
        --------------------
      -- ------
    --
  --
---
  • modules：用于分割 state、mutations、actions。例如：
----- ----- - -------------
  -------- -
    ----- -
      ------ -
        ----- --------
        ---- ---
      --
      ---------- -
        -------------- ----- -
          ---------- - -----
        --
        ------------- ---- -
          --------- - ----
        --
      --
      -------- -
        -------------- ------ -- ----- -
          ------------- -- -
            ----------------- ------
          -- ------
        --
      --
    --
  --
---

访问 state

我们可以直接访问 state 中的属性，例如：

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

提交 mutations

我们可以通过提交 mutations 来修改 state。例如：

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

也可以传递附加参数：

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

执行 actions

我们可以通过执行 actions 来执行异步操作，并最终通过提交 mutations 修改 state。例如：

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

actions 支持异步操作，部分流程代码如下：

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

监听 state 的变化

我们可以通过监听 state 变化来进行对应的操作。例如：

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

使用插件

我们可以使用插件来扩展 store 的功能。例如：

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

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

示例代码

基础使用

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

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

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

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

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

拆分 modules

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

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

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

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

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

使用插件

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

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

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

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

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

总结

在 React 应用中，使用 berx 可以更方便地进行状态管理。我们可以使用 createStore 来创建 store，并且在 options 中传入相应的 state、mutations、actions 和 modules。我们可以通过监听 state 的变化，执行 mutations 和 actions，来修改 state 的值。此外，使用插件还可以扩展 store 的功能。

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

阅读全文

猜你喜欢

  • npm 包 bsql 使用教程

    在前端开发中，操作数据库是经常需要进行的工作。我们可以使用 Object Relational Mapping（ORM）工具来简化这个过程，而 bsql 正是其中的一个实用工具。

    4 年前
  • npm 包 @isow/ks-pay-ui-module 使用教程

    简介 在前端开发过程中，很多时候需要使用第三方库，而 npm 是目前最流行的 JavaScript 包管理器。本文将介绍如何使用 npm 包 @isow/ks-pay-ui-module。

    4 年前
  • npm 包 accessor 使用教程

    在前端开发中，经常会使用到一些依赖库来提高开发效率，而 npm 是前端开发中最常用的包管理工具之一。本文将介绍 npm 包 accessor 的使用方法，以帮助前端开发者更快地理解和使用该包。

    4 年前
  • npm 包 vue-msgs 使用教程

    简介 vue-msgs 是一个基于 Vue 的弹窗组件，可以像 message、alert、confirm 一样弹出不同类型的信息框，并支持自定义确认、取消按钮文本以及回调函数。

    4 年前
  • npm包Polyinterface使用教程

    Polyinterface是一个开源项目，它为智能家居设备提供了一个通用的接口，开发人员可以使用它来开发自己的智能家居设备。 Polyinterface是用Python编写的，它还有一个与之对应的np...

    4 年前
  • npm 包 bezier-animator 使用教程

    概述 在前端开发中，动画效果是常常需要用到的。而其中一种常见的动画效果就是贝塞尔曲线动画。bezier-animator 是一个基于贝塞尔曲线的 JavaScript 动画库，其可以帮助开发者在网页中...

    4 年前
  • npm 包 npm-react-component-kit 使用教程

    npm 是一个非常流行的 Node.js 包管理工具，它使前端开发人员能够轻松地安装、更新和管理前端应用程序所需的各种库和插件。而 npm-react-component-kit 则是一个非常有用的 ...

    4 年前
  • npm 包 egg-lowdb 使用教程

    前言 在虚拟 DOM 技术的浪潮中，前端页面的复杂度也随之提高。前端开发人员需要使用各种工具和技术来提高效率和代码质量。其中，npm 包是一种十分重要的工具。本文将介绍一款名为 egg-lowdb 的...

    4 年前
  • npm 包 Sideway 使用教程

    Sideway 是一个开源的前端 JavaScript 工具，在创建实时系统时使用它可以轻松实现 WebSocket 连接。它是一个基于 Node.js 的 npm 包, 可以在前端和后端中使用。

    4 年前
  • npm包 twitter-caption 使用教程

    如果你经常使用 Twitter，那么你一定知道那些有趣的、引人入胜的推文是如何被分享的。这些推文往往配有生动有趣的说明语句，这些语句被称为“标题”或“推文标题”。为了帮助前端开发人员也能够在自己的网站...

    4 年前
  • npm 包 three-trackballcontrols-es6 使用教程

    three-trackballcontrols-es6 是一个非常实用的 JavaScript 库，它可以为 Three.js 3D 游戏引擎提供 TrackballControls 的控制功能。

    4 年前
  • npm 包 randoma 使用教程

    介绍 在前端开发中，随机数是一个常见需求，例如在游戏中随机生成道具或者在数据分析中生成随机样本等。npm 上有一个名为 randoma 的开源包，可以帮助我们在 Node.js 和浏览器环境中生成高质...

    4 年前
  • npm 包 download-purescript 使用教程

    什么是 download-purescript download-purescript 是一个用来下载和安装 PureScript 的 npm 包。PureScript 是一种函数式编程语言，类似于 ...

    4 年前
  • npm 包 console-recorder 使用教程

    前言 在前端开发中，调试是必不可少的一个环节。而 console.log() 是最常用的调试方法之一。但是，当我们遇到一些复杂的问题时，需要查看多个页面或者长时间的操作才能复现，这时候再去一遍遍手动复...

    4 年前
  • npm 包 simple-js-pedersen-commitment 使用教程

    前言 在前端领域，我们可以使用许多 npm 包来实现各种功能。其中，simple-js-pedersen-commitment 是一个用于实现 Pedersen 承诺算法的 npm 包。

    4 年前
  • npm包simple-js-hash-store使用教程

    简介：npm包simple-js-hash-store是一个用于内存中hash表存储的JavaScript工具库。它为开发者提供了简单易用的接口来处理键值对（key-value）数据的存储和读取。

    4 年前
  • npm 包 leadoff 使用教程

    前言 前端开发离不开各种工具库的支持，而 npm 包就是最常用的一种工具。在 npm 上有很多非常优秀的开源工具库，其中包括了各种常用的 JavaScript 工具。

    4 年前
  • npm 包 cwg-json-query 使用教程

    简介 cwg-json-query 是一个在前端开发中广泛使用的 npm 包，它可以帮助开发者在 JSON 数据中进行快速查询和筛选，从而提高开发效率和代码质量。 使用方法 安装 在项目根目录下使用 ...

    4 年前
  • npm 包 xy-pool 使用教程

    在前端开发中，我们经常需要从服务器获取数据，包括图片、视频、音频等等。为了提高网站的性能和用户体验，我们通常需要将这些资源缓存在本地，并在需要的时候从本地获取。这时就需要一个好用的资源池来管理这些资源...

    4 年前
  • npm 包 huijiewei-ion-rangeslider 使用教程

    在前端开发中，有时候需要进行数据的筛选或者滑动条的选择等场景，这时候可以使用一款叫做 huijiewei-ion-rangeslider 的 npm 包来实现。本文将详细介绍该 npm 包的使用教程以...

    4 年前

相关推荐

    暂无文章