简介
redux-url 是一个通过 URL 管理 Redux 状态的工具包。它允许你实现基于 URL 的状态同步，例如当用户在浏览器中进行导航时，可以保留当前应用程序的状态。
redux-url 可以帮助我们：
- 将当前应用程序状态以 URL 参数的形式进行导航。
- 将当前应用程序状态储存到浏览器状态管理工具中（如 localStorage、sessionStorage）。
- 在浏览器前进和后退事件中恢复应用程序的状态。
安装
npm install redux-url
使用
1. 创建 Redux Store
要使用 redux-url，首先需要在 Redux Store 中启用 redux-url 集成。使用 redux-url 需要安装 redux 和 react-router-dom。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- - ---- --------------------- ------ - ----------------------- - ---- ------------ ----- ------- - ----------------- -------- -------------- -- --- ------- --- ----- ---------- - ---------------------------- ----- ----- - -------------------- --- --------------------------------
2. 同步 URL 和应用程序状态
要将 URL 同步到应用程序状态中，需要使用 subscribe 函数。它可以接收一个回调函数，在 URL 变更时被调用。
import { subscribe } from 'redux-url';
subscribe((url) => {
// 根据 URL 更新应用程序状态
});3. 将应用程序状态同步到 URL
要将应用程序状态同步到 URL 中，需要使用 setUrl 函数。它可以接收 Redux 的 state，根据你的 URL 格式来编码 URL。
-- -------------------- ---- ------- ------ - ------ - ---- ------------ ------------------ -- - ----- ----- - ----------------- -- -- --- ---- ----- -------- ----- --- - ------------------------ -- - ----- --- --- - ------------ ---
示例
假设我们有一个网站，其中包含一个搜索框和一个列表。当我们提交搜索表单时，列表将显示相应的搜索结果。我们可以使用 URL 来记录和分享搜索结果，并允许用户在不同的搜索结果选项之间进行导航。
我们可以创建一个 Redux store 来管理搜索相关的状态。首先，导入所需的 Redux 和 redux-url 工具包：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ----------------------- - ---- ------------ ------ --------------- ---- -------------- ----- ------- - ----------------- ------- -------------- --- ----- ---------- - - ---------------- -------------------------- --
接下来，我们可以添加一些 Reducer 和 Action Creator 来管理搜索相关的状态：
-- -------------------- ---- -------
-- ----------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
----- ------------- - -- -- --
----- ---------------
---
----- ------------- - --------- -- --
----- ---------------
--------
---
----- ------------- - ------- -- --
----- ---------------
------
---
------ ----- ------ - ------- -- -
------ ----- ---------- -- -
--------------------------
--- -
----- ------- - ----- -----------------
---------------------------------
- ----- ------- -
---------------------------------------
-
--
---- -------------------- ---- -------
-- -----------
------ - --------------- --------------- -------------- - ---- ------------
----- ------------ - -
------ ---
-------- ---
-------- ------
------ -----
--
-------- ------------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ -
---------
-------- -----
------ -----
--
---- ---------------
------ -
---------
-------- ---------------
-------- ------
--
---- ---------------
------ -
---------
------ -------------
-------- ------
--
--------
------ ------
-
-接着，我们可以在应用程序中使用 subscribe 和 setUrl 函数同步 URL 和应用程序状态：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ------------ ------ - ----------------- ---------------- - ---- -------- ------------------ -- - ----- ----- - ----------------- -- -- --- ---- ----- -------- ----- --- - ------------------------ -- - ----- --- --- - ------------ --- --------------- -- - -- -- --- -------- ----- ----- - ---------------------- ---------------- ----- -------------- ----- --- ---
最后，我们可以在 React 组件中渲染搜索表单和结果列表，并在表单提交时调用 search Action Creator：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------ - ---- ------------
-------- ------------ -
----- ----------- - ----------------- -- --------------------
----- -------- - --------------
----- ------- --------- - ----------------------
----- ------------ - ----- ------- -- -
-----------------------
------------------------
--
------ -
----- ------------------------
------ ----------- -------------------- ------------- ------------- -- ------------------------- --
------- -----------------------------
-------
--
-
-------- ------------ -
----- - -------- ------- - - ----------------- -- --------------
-- --------- -
------ ------------------
-
-- ----------------- -
------ ----- ------- -----------
-
------ -
----
------------------- -- --- -------------------------------------
-----
--
-
------ ------- -------- ------------ -
------ -
--
----------- --
----------- --
---
--
-现在，当用户在搜索表单中输入查询并提交表单时，URL 将会更新，并在浏览器的历史记录中出现一个记录。在浏览器的 “返回” 和 “前进” 操作中，应用程序也将保留先前的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa581e8991b448d8207