简介
redux-hist-dom 是一个 Redux 中间件，通过监听浏览器的地址栏变化来实现对 Redux 状态树的变化。它的核心就是运用了 history 库中的 createBrowserHistory API 以及 connected-react-router 库中的一些方法。通过这个中间件，我们可以很方便地在 Redux 应用中实现历史记录功能。
安装
使用 npm :
--- ------- ------ --------------
或者使用 yarn :
---- --- --------------
使用
引入
在创建 Redux store 之前引入 redux-hist-dom 并使用 applyMiddleware 引入中间件：
------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ---------- ------ - ---------------- - ---- ------------------------- ------ - -------------- - ---- ----------------- ------ ----------- ---- ------------------- ----- ------- - ----------------------- ----- ---------- - --------------------------- ------------------------- ----- ----- - ------------ --------------------- ------------------------------ --
注意：histMiddleware 需要在 routerMiddleware 之后注册，因为 histMiddleware 依赖于 routerMiddleware。
配置
histMiddleware 接受一个可选的配置对象，可以通过以下属性进行配置：
filter：过滤器，用于指定哪些 actions 需要被记录到浏览器历史中。默认为 null，即所有 actions 都会被记录。
----- ---------- - -
--------------------------
----------------------- - ------- ------ --
------------ --- -------------------
---
--transform：状态变换函数，用于在记录到浏览器历史之前对状态进行处理。默认为 null，即不做处理。
----- ---------- - -
--------------------------
----------------------- - ---------- ----- --
-- --------- ---------- ----------- --
---
--whitelist：白名单数组，用于指定哪些状态属性需要被保存到浏览器历史中。默认为 null，即所有属性都会被保存。
----- ---------- - - -------------------------- ----------------------- - ---------- ------------- --- --
使用
使用 pushHist() 方法添加一个新的状态到浏览器历史记录中：
------ - -------- - ---- ----------------- ------------------------- ----- ----- ----- ----
使用 goHist(number) 方法回退或前进指定的历史记录数量：
------ - ------ - ---- ----------------- --------------------------- -- -------- -------------------------- -- --------
使用 popHist() 方法将当前状态出栈，回退至前一个状态：
------ - ------- - ---- ----------------- --------------------------
示例代码
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- ----------
------ - ---------------- - ---- -------------------------
------ - --------------- --------- ------- ------- - ---- -----------------
----- ------- - -----------------------
----- ---------- - --------------------------- -------------------------
----- ------------ - -
------ --
----- ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
-
----- ----- - --------------------------------- --------------------------------
---------------- ----- ----------- ---
------------------------------ -- - ------ -- ----- -- -
------------------------- ----- ----------- -------- ----- ----- ----
------------------------------ -- - ------ -- ----- ----- ----- -
---------------- ----- ----------- ---
------------------------------ -- - ------ -- ----- ----- ----- -
---------------------------
------------------------------ -- - ------ -- ----- ----- ----- -
--------------------------
------------------------------ -- - ------ -- ----- ----- ----- -结论
redux-hist-dom 可以提供很好的浏览器历史记录管理支持，适用于需要记录用户与 Redux 状态交互历史的场景。在 React、Redux、React-Router 应用中使用 redux-hist-dom 可以减少很多冗余的代码，同时也可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d8f81e8991b448db503