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