简介
rrstore 是一个轻量的 Redux 数据管理工具库，主要用于 React 应用。其优势在于简洁易用，可根据需求轻松配置。
安装
使用 npm 安装：
npm install rrstore
或使用 yarn 安装：
yarn add rrstore
初始化
使用 rrstore 创建一个 store：
-- -------------------- ---- -------
------ - ----------- - ---- ----------
----- ----- - -------------
------------- - ------ - --
-------- ------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
---上述代码创建一个 count 变量的初始值为 0 的状态，并定义了 INCREMENT 和 DECREMENT 两个 action 来分别增加和减少 count 值。
使用
在组件中使用 rrstore：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------
----- ------- - -- -- -
----- ------- --------- - -----------
----- --------------- - -- -- ---------- ----- ----------- ---
----- --------------- - -- -- ---------- ----- ----------- ---
------ -
-----
---------- ------------------
------- ------------------------------------
------- ------------------------------------
------
--
--在上面的代码中，使用 useStore 将 store 的状态和 dispatch 函数导入组件中，并使用两个按钮分别触发 INCREMENT 和 DECREMENT 两个 action。
高级用法
中间件
在 rrstore 的 createStore 方法中可以添加中间件。比如，有一个可以将所有 action 打印输出的中间件：
-- -------------------- ---- -------
------ - ----------- - ---- ----------
----- ---------------- - ----- -- ---- -- ------ -- -
----------------------- -------------
----- ----------- - -------------
-------------------- ------------------
------ ------------
--
----- ----- - -------------
------------- - ------ - --
-------- ------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----------- -------------------
---combineReducers
为了更好的管理状态，可以使用 combineReducers 将多个 reducer 组合成一个。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- ----------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----------- - ------ - - ------ -- -- ------- -- -
------ ------------- -
---- -----------
------ - ------ ---------------- --------------- --
--------
------ ------
-
--
----- -------- - -----------------
-------- ---------------
----- ------------
---
----- ----- - -------------
------------- ---
-------- ---------
---上述代码中，创建了两个 reducer： counterReducer 和 todoReducer。然后通过 combineReducers 将这两个 reducer 合并起来，最终创建了一个名为 counter 的状态对象和一个名为 todo 的状态对象。
总结
rrstore 是一个非常轻量的 Redux 数据管理工具库，可以帮助我们在 React 应用中更好的管理状态数据。需要注意的是，其仅支持 React Hooks API，所以需要使用 React Hooks 编写组件才能使用 rrstore。但是，相比于 Redux，它的使用更加简单易懂，对于入门级别的前端开发者来说，是一款不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056da281e8991b448e70ec