介绍
jperl-redux-recycle 是一个轻量级的 Redux 中间件，可以自动将 Redux store 中的旧状态存储到一个循环队列中，并在达到指定大小时将旧状态弹出队列。通过使用这个中间件，开发者可以轻松地处理一些常见的 Redux 状态管理问题，例如撤销和恢复某些操作。
安装
可以通过 npm 命令来安装 jperl-redux-recycle，具体命令如下：
npm install jperl-redux-recycle --save
使用
使用 jperl-redux-recycle 中间件非常简单，只需要在 Redux store 的创建过程中将其传递给 applyMiddleware 函数即可。具体代码如下：
import { createStore, applyMiddleware } from 'redux';
import recycle from 'jperl-redux-recycle';
const store = createStore(
reducer, // Redux reducer
applyMiddleware(recycle())
);在以上的示例代码中，我们假设已经定义了一个纯函数 reducer 用来处理 Redux store 中的状态变化。重点是在 applyMiddleware 函数中传递 recycle 函数，并将其作为中间件来使用。
配置
jperl-redux-recycle 还可以通过传递一些可选的参数来对其行为进行一些配置。下面是一些常用的配置选项：
- maxAge (number): 循环队列的最大容量，当队列长度大于此值时，最早进入队列的状态将会被丢弃。
- filter (function): 一个函数，用于决定哪些 action 需要被存储进循环队列中。该函数应该接受一个参数 action，返回一个布尔值指明是否应该存储该 action 的状态。
- key (string | function): 一个函数或字符串，用于从 action 对象中提取一个标识符，该标识符用来唯一地标识该 action 所表示的状态。如果未提供该选项，则会默认使用 action.type 作为标识符。
示例
下面我们给出一个简单的示例来演示如何使用 jperl-redux-recycle 实现一个简单的撤销操作。
首先，我们需要在 Redux store 中使用 recycle 中间件：
import { createStore, applyMiddleware } from 'redux';
import recycle from 'jperl-redux-recycle';
const store = createStore(
reducer, // Redux reducer
applyMiddleware(recycle())
);然后，我们需要定义一个 actionCreator 函数来创建撤销 action：
const undo = () => ({ type: 'UNDO' });接下来，我们需要创建新的 reducer，该 reducer 增加了对撤销操作的处理：
-- -------------------- ---- -------
----- -------- - --------- -- -
-- -------
----- ------------ - -
----- ---
-------- ------------------ ----
------- --
--
-- ---- ------- --
------ ------ - ------------- ------- -- -
------ ------------- -
---- -------
-- ------------------ --- -- -
------ ------
-
------ -
----- ------------------- ----
-------- ------------------------
------- --------------- ----------------
--
--------
----- ---------- - ---------------------- --------
-- ----------- --- -------------- -
------ ------
-
------ -
----- --------------- ---------------
-------- -----------
------- --
--
-
--
--在以上代码中，我们首先定义了一个新的函数 undoable，该函数接受一个 reducer 并返回一个增强版的 reducer，支持撤销和恢复操作。然后我们定义了一个包含过去、现在和将来状态的状态对象 initialState，以及一个新的 reducer 函数，该函数根据传入的 action 类型进行不同的处理。
在对 reducer 进行增强的过程中，我们首先需要判断当前 action 是否是撤销操作，如果是，则导航到上一个状态。具体地，我们将当前状态加入到未来记录中，并将上一个状态设为当前状态，同时从过去记录中移除当前状态。
如果当前 action 不是撤销操作，我们就需要在当前状态基础上进行一些更新。具体地，我们调用原始 reducer 函数来获取新的 present 状态，如果新的状态和当前状态相同，则不必更新状态，直接返回当前 state。否则，我们将当前状态加入到过去记录中，并将新状态设为当前状态，还将未来记录清空。
最后，我们需要将 undoable reducer 应用到我们实际的 reducer 上：
-- -------------------- ---- -------
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
-
----- ------------
---------- -----
-
--
---- --------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ -
--------
---------- ---------------
--
-
------ -----
---
--------
------ ------
-
--
----- --------------- - -----------------------
----- ----- - ---------------------------- ----------------------------在以上代码中，我们先定义了一个简单的 todosReducer，用来管理 todo 列表的状态。然后我们将 todosReducer 传递给 undoable 函数来获取增强版的 reducer，最后使用 jperl-redux-recycle 中间件将增强版的 reducer 应用于 Redux store 中。
现在我们就可以在 UI 中使用 undo action 来撤销之前的操作了：
onClick={() => store.dispatch(undo())}总结
jperl-redux-recycle 是一个非常灵活、易用的 Redux 中间件，能够为开发者提供很多方便，例如状态回退、恢复等功能。在使用过程中，我们可以通过提供一些可选的配置选项，对其行为进行一些自定义。最后，通过一个简单的案例，我们演示了如何使用 jperl-redux-recycle 实现一个基本的撤销操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547a81e8991b448d1bfd