前言
在前端开发中，状态管理是非常重要的一部分。Redux 是一种极其流行的状态管理库。它使得状态管理更加易于维护和控制。Redux提供了一个灵活的 API，使得开发者可以深入自定义 Redux 数据流的处理逻辑。在这篇文章中，我们将讨论如何使用Redux Enhancer有效的扩展Redux应用。
Redux Enhancer 是什么？
Enhancer 是一种拓展 Redux store 的方式。它们是一些可以包装 store 到其它 store 的高阶函数。通过传入新的 reducer、middleware、state 或者增强器，来生成一个新的 store 。
Redux的开发团队预设了applyMiddleware 和 compose 来支持 store 增强器的实现。开发者只需要实现自己的 store 增强器，然后在创建 store 时通过 applyMiddleware 和 compose 来使用它即可。
Redux Enhancer 主要的作用是通过对 store 的 action 的中间件方法进行拦截并扩充，来对 Redux 应用进行一些附加的特性、功能或者行为。
Redux-enhancer 的使用教程
在 Redux 中，如何使用 Enhancer 呢？redux-enhancer 就是其中的一个增强器。通过使用 redux-enhancer ，你可以轻松的实现如下功能：
1.【缓存】：可以根据某个特定条件为状态缓存添加时间限制。 2.【手动保存】：可以在程序将关闭之前向服务器手动保存状态。 3.【Logger】：可以记录 Redux Store 中的所有变化。 4.【记录Undo / Redo历史记录】：可以记录 Store 的每一个更新，以支持撤销/重做操作。 5.【组合】：可以轻松的组合多个增强器。
接下来我们将使用redux-enhancer增强器来实现一个非常简单的 Redux应用。
示例代码
-- -------------------- ---- -------
-- -- -----
------ - ------------ --------------- - ---- --------
------ -------- ---- -----------------
----- ------------ - -
------- -
--
----- ------- - ------ - ------------- ------ - --- -- -
------ ------------- -
---- ------
------ - --------- ------- ------------ - ------------ --
---- -----------
------ - --------- ------- ------------ - ------------ --
--------
------ ------
-
--
-- ----- -----------
----- ----- - ------------
--------
-------------
-----------------
------------------
----------------
--
-- -----
----- ------ - -- -- ---- -- ------ -- -
------------------- -----------------
------------------ ------ ----------------------
----- ------ - -------------
------------------ ----- ----------------------
------ -------
--
----- ----- - ----------- ---------- -- ---- -- ------ -- -
----- ------ - -------------
-- ------------ --- ------ -
---------------------------------------- ----------------------------------
-
------ -------
-
----- ------- - ----------- ---------- -- ---- -- ------ -- -
----- ------ - -------------
----- ---------- - -- -- -
---------------------------------------- ----------------------------------
--
--------------------- - -----------
------ -------
-
-- -- -----
---------------- ----- ------ ------ - ---
---------------- ----- ----------- ------ - ---
这段代码演示了我们如何在每个reducer方法被调用的时候，记录下每一次存储在 store 中的状态变更。现在让我们通过逐行讲解来理解这段代码。
首先，我们导入 createStore 和 applyMiddleware 方法，以及 enhancer 增强器。
import { createStore, applyMiddleware } from 'redux';
import enhancer from 'redux-enhancer';接下来，我们定义了我们应用的“初始状态”。
const initialState = {
result: 0
};我们的应用仅仅是一个计数器，它的初始值为0，每当 ADD 或 SUBTRACT action 被分发时，它的值将增加或减少。
我们还需要定义一个reducer方法。这个方法会接收两个参数。第一个参数是我们应用的当前状态，第二个参数是一个 action 对象。
-- -------------------- ---- -------
----- ------- - ------ - ------------- ------ - --- -- -
------ ------------- -
---- ------
------ - --------- ------- ------------ - ------------ --
---- -----------
------ - --------- ------- ------------ - ------------ --
--------
------ ------
-
--这个reducer方法只是简单的根据action中不同的type值来增加或减少状态。我们现在使用这个reducer来创建我们的 store：
const store = createStore(
reducer,
initialState,
enhancer(logger),
enhancer(persist),
enhancer(cache),
);我们要使用 applyMiddleWare 方法来将 enhancer增强器 注入到 createStore 创建的方法中。我们在这里同时传入了我们定义了的 logger，cache 和 persist方法。
最后，我们定义了三个中间件来扩展我们的应用。首先是 logger，它会记录每次状态变更，并打印出来。
const logger = () => next => action => {
console.log(`Action ${action.type}`);
console.log(`State before ${store.getState()}`);
const result = next(action);
console.log(`State after ${store.getState()}`);
return result;
};接着是 cache 方法，它可以根据我们在 add action 中传入的值设置 time-to-live 应用程序。如果我们采用此方法，那么一定时间内每次触发 add action 时，我们的应用就会在本地存储中缓存一份数据。
const cache = ({dispatch, getState}) => next => action => {
const result = next(action);
if (action.type === 'ADD') {
localStorage.setItem("reduxStoreResult", JSON.stringify(getState().result))
}
return result;
}最后是 persist 方法，当关闭我们的应用时，它可以将状态，以及我们最近采取的操作都保存在我们的本地存储中。
const persist = ({dispatch, getState}) => next => action => {
const result = next(action);
const saveResult = () => {
localStorage.setItem("reduxStoreResult", JSON.stringify(getState().result))
};
window.onbeforeunload = saveResult;
return result;
}总结
在本文中，我们先分析了Reudx Enhancer的原理，然后介绍了实现这种增强器的一个npm包 redux-enhancer。后面的示例代码我们展示了如何使用redux-enhancer，记录Store的state和action，并存储在本地。了解到加强器的使用，可以让我们有能力更好的管理我们的状态，增强我们的状态管理，方便我们进行系统的调试和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731481e8991b448e93f3