Redux-defmap 是一个基于 Redux 的状态管理库，它允许你在 Redux store 中使用类似于 JavaScript 对象的属性访问方式。这个库的灵感来自于 Immutable.js 的 Map 数据结构。在使用 Redux-defmap 时，你可以使用 Map 的方法来操作 Redux store 的 state。
安装
你可以使用 npm 或 yarn 在你的项目中安装 Redux-defmap。
'npm install redux-defmap'
或
'yarn add redux-defmap'
使用
- 在初始化 Redux store 时，使用 Redux-defmap 的 createStore 方法创建 store。
import { createStore } from 'redux-defmap';
import reducer from './reducer';
const store = createStore(reducer, initialState);- 在 reducer 中定义状态树的结构。
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- ------------ - --------
----- ---
---- ---
------- ---
-------- -
------- ---
----- ---
------ ---
---- ---
--
---
-------- ------------- - ------------- ------- -
------ ------------- -
-- ---
--------
------ ------
-
-- 在组件中使用状态树。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --- - ---- ---------------
----- --------------- - ----- -- --
----- ---------- --------
---- ---------- -------
------- ---------- ----------
------- ---------- ------------------
----- ---------- ----------------
------ ---------- -----------------
---- ---------- ---------------
---
----- --- - -- ----- ---- ------- ------- ----- ------ --- -- -- -
-----
-----------------
----------------
-------------------
-------------------
-----------------
------------------
----------------
------
--
------ ------- ------------------------------- 在 action 中更新状态树。
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ ----- ------- - ---- -- --
----- -----------
-------- -----
---
------ ----- ------ - --- -- --
----- ----------
-------- ----
---
------ ----- --------- - ------ -- --
----- -------------
-------- -------
---
------ ----- --------- - ------ -- --
----- -------------
-------- -------
---
------ ----- ------- - ---- -- --
----- -----------
-------- -----
---
------ ----- -------- - ----- -- --
----- ------------
-------- ------
---
------ ----- ------ - --- -- --
----- ----------
-------- ----
---
------ ----- ------------- - -- ------- ----- ------ --- -- -- --
----- -----------------
-------- -
-------
-----
------
----
--
---
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ ---------- ------- ----------------
---- ----------
------ ---------- ------ ----------------
---- -------------
------ ---------- --------- ----------------
---- -------------
------ ---------- ----------------- ----------------
---- -----------
------ ---------- --------------- ----------------
---- ------------
------ ---------- ---------------- ----------------
---- ----------
------ ---------- -------------- ----------------
---- -----------------
------ -----
---------------------- ----------------------
-------------------- --------------------
--------------------- ---------------------
------------------- --------------------
--------
------ ------
-
-示例代码
下面是一个使用 Redux-defmap 的完整示例代码。
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --- - ---- ---------------
------ -
--------
-------
----------
----------
--------
---------
-------
--------------
- ---- ------------
----- --------------- - ----- -- --
----- ---------- --------
---- ---------- -------
------- ---------- ----------
------- ---------- ------------------
----- ---------- ----------------
------ ---------- -----------------
---- ---------- ---------------
---
----- ------------------ - -------- -- --
-------- ---- -- ------------------------
------- --- -- ----------------------
---------- ------ -- ----------------------------
---------- ------ -- ----------------------------
-------- ---- -- ------------------------
--------- ----- -- --------------------------
------- --- -- ----------------------
-------------- ------- -- ---------------------------------
---
----- --- - --
-----
--------
----
-------
-------
----------
-------
----------
-----
--------
------
---------
----
-------
--------------
-- -- -
-----
-----
--------------------
------ ----------- ------------ ----------- -- ------------------------ --
------
-----
-------------------
------ ----------- ----------- ----------- -- ----------------------- --
------
-----
----------------------
------ ----------- -------------- ----------- -- -------------------------- --
------
-----
----------------------
------ ----------- -------------- ----------- -- -------------------------- --
------
-----
--------------------
------ ----------- ------------ ----------- -- ------------------------ --
------
-----
---------------------
------ ----------- ------------- ----------- -- ------------------------- --
------
-----
-------------------
------ ----------- ----------- ----------- -- ----------------------- --
------
-----
-------
----------- --
---------------
------- ---- ---- -----
----- ----------
------ -----
---- --------
--
-
-
------ -------
---------
------
------
--
------ ------- ------------------------ -------------------------actions.js
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ ----- ------- - ---- -- --
----- -----------
-------- -----
---
------ ----- ------ - --- -- --
----- ----------
-------- ----
---
------ ----- --------- - ------ -- --
----- -------------
-------- -------
---
------ ----- --------- - ------ -- --
----- -------------
-------- -------
---
------ ----- ------- - ---- -- --
----- -----------
-------- -----
---
------ ----- -------- - ----- -- --
----- ------------
-------- ------
---
------ ----- ------ - --- -- --
----- ----------
-------- ----
---
------ ----- ------------- - -- ------- ----- ------ --- -- -- --
----- -----------------
-------- -
-------
-----
------
----
--
---
----- ------------ - --------
----- ---
---- ---
------- ---
-------- -
------- ---
----- ---
------ ---
---- ---
--
---
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ ---------- ------- ----------------
---- ----------
------ ---------- ------ ----------------
---- -------------
------ ---------- --------- ----------------
---- -------------
------ ---------- ----------------- ----------------
---- -----------
------ ---------- --------------- ----------------
---- ------------
------ ---------- ---------------- ----------------
---- ----------
------ ---------- -------------- ----------------
---- -----------------
------ -----
---------------------- ----------------------
-------------------- --------------------
--------------------- ---------------------
------------------- --------------------
--------
------ ------
-
-
------ ------- --------总结
使用 Redux-defmap 可以让你更轻松地管理 Redux store 中的状态。在使用这个库时，你需要做的只是定义状态树的结构，然后使用 get 和 set 方法来操作它。如果你想进一步学习 Redux-defmap，可以去官方网站查看文档和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a19