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。
------ - ----------- - ---- --------------- ------ ------- ---- ------------ ----- ----- - -------------------- --------------
- 在 reducer 中定义状态树的结构。
------ - ------ - ---- --------------- ----- ------------ - -------- ----- --- ---- --- ------- --- -------- - ------- --- ----- --- ------ --- ---- --- -- --- -------- ------------- - ------------- ------- - ------ ------------- - -- --- -------- ------ ------ - -
- 在组件中使用状态树。
------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - --- - ---- --------------- ----- --------------- - ----- -- -- ----- ---------- -------- ---- ---------- ------- ------- ---------- ---------- ------- ---------- ------------------ ----- ---------- ---------------- ------ ---------- ----------------- ---- ---------- --------------- --- ----- --- - -- ----- ---- ------- ------- ----- ------ --- -- -- - ----- ----------------- ---------------- ------------------- ------------------- ----------------- ------------------ ---------------- ------ -- ------ ------- ------------------------------
- 在 action 中更新状态树。
------ - --- - ---- --------------- ------ ----- ------- - ---- -- -- ----- ----------- -------- ----- --- ------ ----- ------ - --- -- -- ----- ---------- -------- ---- --- ------ ----- --------- - ------ -- -- ----- ------------- -------- ------- --- ------ ----- --------- - ------ -- -- ----- ------------- -------- ------- --- ------ ----- ------- - ---- -- -- ----- ----------- -------- ----- --- ------ ----- -------- - ----- -- -- ----- ------------ -------- ------ --- ------ ----- ------ - --- -- -- ----- ---------- -------- ---- --- ------ ----- ------------- - -- ------- ----- ------ --- -- -- -- ----- ----------------- -------- - ------- ----- ------ ---- -- --- -------- ------------- - ------------- ------- - ------ ------------- - ---- ----------- ------ ---------- ------- ---------------- ---- ---------- ------ ---------- ------ ---------------- ---- ------------- ------ ---------- --------- ---------------- ---- ------------- ------ ---------- ----------------- ---------------- ---- ----------- ------ ---------- --------------- ---------------- ---- ------------ ------ ---------- ---------------- ---------------- ---- ---------- ------ ---------- -------------- ---------------- ---- ----------------- ------ ----- ---------------------- ---------------------- -------------------- -------------------- --------------------- --------------------- ------------------- -------------------- -------- ------ ------ - -
示例代码
下面是一个使用 Redux-defmap 的完整示例代码。
App.js
------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - --- - ---- --------------- ------ - -------- ------- ---------- ---------- -------- --------- ------- -------------- - ---- ------------ ----- --------------- - ----- -- -- ----- ---------- -------- ---- ---------- ------- ------- ---------- ---------- ------- ---------- ------------------ ----- ---------- ---------------- ------ ---------- ----------------- ---- ---------- --------------- --- ----- ------------------ - -------- -- -- -------- ---- -- ------------------------ ------- --- -- ---------------------- ---------- ------ -- ---------------------------- ---------- ------ -- ---------------------------- -------- ---- -- ------------------------ --------- ----- -- -------------------------- ------- --- -- ---------------------- -------------- ------- -- --------------------------------- --- ----- --- - -- ----- -------- ---- ------- ------- ---------- ------- ---------- ----- -------- ------ --------- ---- ------- -------------- -- -- - ----- ----- -------------------- ------ ----------- ------------ ----------- -- ------------------------ -- ------ ----- ------------------- ------ ----------- ----------- ----------- -- ----------------------- -- ------ ----- ---------------------- ------ ----------- -------------- ----------- -- -------------------------- -- ------ ----- ---------------------- ------ ----------- -------------- ----------- -- -------------------------- -- ------ ----- -------------------- ------ ----------- ------------ ----------- -- ------------------------ -- ------ ----- --------------------- ------ ----------- ------------- ----------- -- ------------------------- -- ------ ----- ------------------- ------ ----------- ----------- ----------- -- ----------------------- -- ------ ----- ------- ----------- -- --------------- ------- ---- ---- ----- ----- ---------- ------ ----- ---- -------- -- - - ------ ------- --------- ------ ------ -- ------ ------- ------------------------ -------------------------
actions.js
------ - --- - ---- --------------- ------ ----- ------- - ---- -- -- ----- ----------- -------- ----- --- ------ ----- ------ - --- -- -- ----- ---------- -------- ---- --- ------ ----- --------- - ------ -- -- ----- ------------- -------- ------- --- ------ ----- --------- - ------ -- -- ----- ------------- -------- ------- --- ------ ----- ------- - ---- -- -- ----- ----------- -------- ----- --- ------ ----- -------- - ----- -- -- ----- ------------ -------- ------ --- ------ ----- ------ - --- -- -- ----- ---------- -------- ---- --- ------ ----- ------------- - -- ------- ----- ------ --- -- -- -- ----- ----------------- -------- - ------- ----- ------ ---- -- --- ----- ------------ - -------- ----- --- ---- --- ------- --- -------- - ------- --- ----- --- ------ --- ---- --- -- --- -------- ------------- - ------------- ------- - ------ ------------- - ---- ----------- ------ ---------- ------- ---------------- ---- ---------- ------ ---------- ------ ---------------- ---- ------------- ------ ---------- --------- ---------------- ---- ------------- ------ ---------- ----------------- ---------------- ---- ----------- ------ ---------- --------------- ---------------- ---- ------------ ------ ---------- ---------------- ---------------- ---- ---------- ------ ---------- -------------- ---------------- ---- ----------------- ------ ----- ---------------------- ---------------------- -------------------- -------------------- --------------------- --------------------- ------------------- -------------------- -------- ------ ------ - - ------ ------- --------
总结
使用 Redux-defmap 可以让你更轻松地管理 Redux store 中的状态。在使用这个库时,你需要做的只是定义状态树的结构,然后使用 get 和 set 方法来操作它。如果你想进一步学习 Redux-defmap,可以去官方网站查看文档和示例。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562ee81e8991b448e0a19