undo和redo

妖狐艹你老母 2022-05-24 08:17 240阅读 0赞

undo和redo是在做一次笔试题的时候遇到的，最近在用redux重构todos的时候，又出现了，这就写一下吧。

--------------------

在应用中构建撤销和重做功能不是很简单，因为，面对这两个问题，你需要克隆所有相关的model来追踪每一个历史状态，还需要考虑整个撤销堆栈，用户的初始更改也是可以撤销的。

--------------------

在redux中可以轻松的实现撤销，因为：

> 1.  我们在redux应用中，只需要关心`state`的子树；
> 2.  state也是不可变数据，所有修改被描述成独立的`action,`action与预期的撤销堆栈模型很接近了；
> 3.  reducer的签名`（state,action）=>state`可以很自然的实现`reducer enhancers`或者`higher order reducers`.。它们会在我们为reducer添加额外的功能的时候保持着这个签名。  
>     （以上粘自[官网][Link 1]，hhh）

**如果我们希望在一个应用在中实现撤销和重做，我们应该保存更多的state来解决问题：**

> 1.  撤销或重做之后的状态？
> 2.  当前状态？
> 3.  撤销堆栈中过去和未来的状态是什么？

根据这些，我们设计它们的算法：

{ past:Array<T>, present:T, future:Array<T> }

## undo:撤销 ##

> 1.  移除past中的最后一个元素
> 2.  将上一步移除的元素赋予present.
> 3.  将原来的present插入到future的最前面。

## redo:重做 ##

> 1.  移除future中的第一个元素。
> 2.  将上一步移除的元素赋予present.
> 3.  将原来present追加到past的最后面。

## 处理其他Action ##

> 1.  将当前present追加到past的最后面。
> 2.  处理完action所产生的新的state赋予present.
> 3.  清空future.

## Reducer Enhancer ##

现在我们就可以将任意的reducer通过这个`undoable()`进行封装，从而让它们可以处理undo和redo这两个action.

--------------------

## redux undo ##

**使用：**`npm install --save redux-undo`  
下面将以todo为例，编写reducer.

import undoable,{includeAction} from 'redux-undo';
    
    const todo = (state, action) => {
        switch (action.type) {
            case 'ADD_TODO':
                return {
                    id: action.id,
                    text: action.text,
                    completed: false
                };
            case "TOGGLE_TODO":
                if (state.id !== action.id) {
                    return state;
                }
                return {
                    ...state,
                    completed: !state.completed
                };
            default:
                return state
        }
    };
    
    const todos = (state = [], action) => {
        switch (action.type) {
            case 'ADD_TODO':
                return [...state, todo(undefined, action)];
            case  'TOGGLE_TODO':
                return state.map(t => todo(t, action));
            default:
                return state;
        }
    };
    
    const undoableTodos = undoable(todos, {
       filter: includeAction(['ADD_TODO', 'TOGGLE_TODO'])})
    
    export default undoableTodos;

**注1：** distinctState()过滤器会过滤掉没有引起state变化的action.  
**注2：**当你要恢复一个state时，必须把present追加到它上面，并且需要通过检查`.past.length`和`.future.length` 才能确定撤销和重做是否被使用。

//判断可否进行UndoRedo操作
    const mapStateToProps = (state) => ({
        canUndo: state.todos.past.length > 0,
        canRedo: state.todos.future.length > 0
    });

然后就是一系列渲染等等的操作，代码[Github][]上，可以看看。

## 结束！ ##

[Link 1]: https://cn.redux.js.org/docs/recipes/ImplementingUndoHistory.html
[Github]: https://github.com/weiqiujuan/react-redux-demo/tree/master/todos