简介
berx 是一个用于 React 应用管理状态的 npm 包。它使用 Redux 和 immer.js，使我们能够更加简单、直观地进行状态管理。
安装
npm install berx
使用方法
初始化
我们需要先引入 berx：
import { createStore } from "berx";然后我们可以通过 createStore 创建一个 store：
const store = createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});在 createStore 的 options 中，我们有以下可选属性：
- state：初始化 store 的状态。例如：
const store = createStore({
state: {
count: 0,
},
});- mutations：用于修改 state 的同步函数。例如：
-- -------------------- ---- -------
----- ----- - -------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
--
--
---- actions：用于执行异步操作并提交 mutations 的函数。例如：
-- -------------------- ---- -------
----- ----- - -------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
--
--
-------- -
---------------- ------ -- -
------------- -- -
--------------------
-- ------
--
--
---- modules：用于分割 state、mutations、actions。例如：
-- -------------------- ---- -------
----- ----- - -------------
-------- -
----- -
------ -
----- --------
---- ---
--
---------- -
-------------- ----- -
---------- - -----
--
------------- ---- -
--------- - ----
--
--
-------- -
-------------- ------ -- ----- -
------------- -- -
----------------- ------
-- ------
--
--
--
--
---访问 state
我们可以直接访问 state 中的属性，例如：
console.log(store.state.count);
提交 mutations
我们可以通过提交 mutations 来修改 state。例如：
store.commit("increment");也可以传递附加参数：
store.commit("setName", "Bob");执行 actions
我们可以通过执行 actions 来执行异步操作，并最终通过提交 mutations 修改 state。例如：
store.dispatch("asyncIncrement");actions 支持异步操作，部分流程代码如下：
actions: {
asyncIncrement({ commit }) {
getAnswer().then((res) => {
commit("incrementByNumber", res.data);
});
},
},-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
---------
----- ---
---
-- ------
---
-监听 state 的变化
我们可以通过监听 state 变化来进行对应的操作。例如：
store.subscribe(() => console.log(store.state.count));
使用插件
我们可以使用插件来扩展 store 的功能。例如：
-- -------------------- ---- -------
----- -------- - ------- -- -
-------------------------- ------ -- -
-------------------------- ------------------
---
--
----- ----- - -------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
--
--
-------- -
---------------- ------ -- -
------------- -- -
--------------------
-- ------
--
--
-------- -----------
---示例代码
基础使用
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ----- - -------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
--
--
-------- -
---------------- ------ -- -
------------- -- -
--------------------
-- ------
--
--
---
------------------ -- --------------------------------
-------------------------- -- -
-------------------------- -- -
---------------------------------拆分 modules
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ----- - -------------
-------- -
----- -
------ -
----- --------
---- ---
--
---------- -
-------------- ----- -
---------- - -----
--
------------- ---- -
--------- - ----
--
--
-------- -
-------------- ------ -- ----- -
------------- -- -
----------------- ------
-- ------
--
--
--
--
---
----------------------------------- -- -----
---------------------------- -------
----------------------------------- -- ---
----------------------------------- -----------
------------- -- -
----------------------------------- -- -------
-- ------使用插件
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- -------- - ------- -- -
-------------------------- ------ -- -
-------------------------- ------------------
---
--
----- ----- - -------------
------ -
------ --
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
--
--
-------- -
---------------- ------ -- -
------------- -- -
--------------------
-- ------
--
--
-------- -----------
---
-------------------------- -- --------- ---------
---------------------------------
------------- -- -
-- --------- ---------
-- --------- -
-------------------------------
-- ------总结
在 React 应用中，使用 berx 可以更方便地进行状态管理。我们可以使用 createStore 来创建 store，并且在 options 中传入相应的 state、mutations、actions 和 modules。我们可以通过监听 state 的变化，执行 mutations 和 actions，来修改 state 的值。此外，使用插件还可以扩展 store 的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725e3660cf7123b363fd