前言
Redux 是一种流行的 JavaScript 应用程序状态管理库。它的流程是由数据流和单项数据流组成的。Redux 有四个基本原则，其中之一是不可变，这要求我们不要在应用程序中直接修改状态，而是应该使用纯函数来创建新的状态。然而在实际开发中，有时我们需要回滚到一个旧的状态，这时就可以使用 redux-rewind。
什么是 redux-rewind?
redux-rewind 是 redux 的一个中间件，它可以让我们在 Redux 的状态树中记录历史状态，并在需要时将状态回滚到之前的某个状态。
redux-rewind 的主要特点如下：
- 通过创建快照来记录历史状态；
- 历史状态保存在根状态树中的单个对象中；
- 状态可以回滚到之前记录的任何状态点；
- 可以根据需要保留历史记录以便于使用。
redux-rewind 的安装
redux-rewind 可以通过 npm 或 yarn 安装。在终端中使用以下命令：
npm install redux-rewind 或 yarn add redux-rewind
redux-rewind 的使用
在编写 Redux 应用程序时，我们将使用 redux-rewind 来跟踪我们的状态。接下来我们将详细介绍如何在 Redux 应用程序中使用它。
配置和初始化
在使用 redux-rewind 之前，我们需要在我们的应用程序中配置它。在 store.js 中添加以下代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ---------- ------ - ---------------- - ---- --------------------- ------ - ------------ - ---- --------------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ----- ---------------- - --------------- ----- ------- - ----------------------- ----- ----------- - --------------------------- ----------------- -------- ----- ----- - ------------ ------------ -- ------- ------------------------------- -- ------ ------- ------
在上面示例中，我们导入了 redux-rewind。将它放在中间件数组的末尾，以确保使用redux-rewind包装我们的store。
现在，我们已经完成了配置，接下来在我们的组件中实现它。可以在需要回滚状态的组件中，通过使用 dispatch 函数来更改 Redux store 中的状态，并在需要的时候将状态回滚到之前的状态。
记录历史状态
在组件中，我们可以通过 dispatch 函数记录历史状态。无论何时我们调用它，当前的状态都会被记录为新的历史状态。
store.dispatch({ type: 'ADD_TODO', payload: 'Redux Rewind Tutorial' });
store.dispatch({ type: 'ADD_TODO', payload: 'Redux-rewind Example' });上述例子会将一个新的 TODO 添加到我们的应用程序状态中，并记录新的历史状态。 当我们调用 store.getState() 时，我们可以看到现有的 TODO 列表和之前的历史状态。
回滚状态
我们可以使用以下代码将状态回滚到之前的历史状态。
store.dispatch({ type: 'REWIND_STATE', payload: 2 });上面例子中，payload 值为 2，所以我们回滚两个历史记录。我们在调用 store.getState() 时会看到，我们的状态已经回滚到了更早的历史状态，其中前两个 TODO 已经从列表中删除。我们只需使用新的历史状态即可。
保留历史记录
如果我们需要保留历史记录以供以后使用，我们可以将 rewind 设置为保留状态的数量。
const rewind = require('redux-rewind').default(3);在上面的示例中，我们设置记录状态的数量为 3。这意味着我们可以将状态回滚到最近的三个历史记录。
示例代码
为了更深入的理解 redux-rewind，下面是一个 Todo 应用程序的示例代码。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ---------- ------ - ---------------- - ---- --------------------- ------ - ------------ - ---- --------------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ----- ---------------- - --------------- ----- ------- - ----------------------- ----- ----------- - --------------------------- ----------------- -------- ----- ----- - ------------ ------------ ------------------------------- -- ------------------ -- --------------------- ------------------- ---------------- ----- ----------- -------- ------------- -------- --- ---------------- ----- ----------- -------- ------------- --------- --- ---------------- ----- ----------- -------- ----------- -------- --- ---------------- ----- ----------- -------- ----------- --------- --- ---------------- ----- --------------- -------- - --- ------------------------------
在上面的示例中，我们创建了一个 Redux store，添加中间件，并在其它组件中使用以下代码更改状态。
store.dispatch({ type: 'ADD_TODO', payload: 'redux-rewind example' });我们的中间件保存了我们的状态历史记录。最后，我们根据需要调用 store.dispatch({ type: 'REWIND_STATE', payload: 2 }); 来回滚状态，payload 值为 2，它指定了回滚两个历史记录。
当我们再次调用 store.getState() 时，我们将看到我们的状态已经回滚到更早的历史记录。
总结
通过使用 redux-rewind，我们可以更轻松地管理 Redux 应用程序中的状态历史记录。 在需要的时候，我们可以回滚到之前的历史状态，而不必担心影响应用程序中的其他状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005693b81e8991b448e4c05