翻译|redux undo/redo reducer增强组件

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 793 | 阅读时长 ≈ 4

Redux的文档中提供一个可以做undo/redo的解决办法,实际是有previous,current,prew的对象,围绕这数据的压入和弹出来实现操作步骤的记忆,结合persist就可以实现更强大的记忆功能.今天的这个增强组件实际把这个功能给包装了一下,内部实现细节仍然没有变.只需要把reducer用这个增强组件包装一下就可以用了.

redux undo/redo

提示:你可以使用redux-undo-boilerplate来开始项目.

Installation

1
npm install --save redux-undo

API

1
2
3
import undoable from 'redux-undo';
undoable(reducer)
undoable(reducer, config)

让你的reducers变得可以重做

redux-undo是一个reducer增强组件,它提供了undoable函数,这个函数接收已经存在的reducer和配置对象,使用undo函数增强已经存在的reducer.

注意：如果在state.counter之前接入,你必须要在包装reducer之后接入state.coutner.present.

首先导入redux-undo

1
2
3
4
 // Redux utility functions 
import { combineReducers } from 'redux';
// redux-undo higher-order reducer 
import undoable from 'redux-undo';

接着,添加undoable到你的reducer

1
2
3
combineReducers({
  counter: undoable(counter)
})

配置项想这样传递

1
2
3
4
5
combineReducers({
  counter: undoable(counter, {
    limit: 10 // set a limit for the history 
  })
})

历史API

使用reducer包装你的reducer想这样

1
2
3
4
5
 {
  past: [...pastStatesHere...],
  present: {...currentStateHere...},
  future: [...futureStatesHere...]
}

现在你可以使用state.present获取当前的state
获取所有过去的state使用state.past.

Undo/Redo Actions

首先导入undo/redo action creators

1
import { ActionCreators } from 'redux-undo';

然后就可以使用store.dispatch()和undo/redo action creators来执行undo/redo操作.

1
2
3
4
5
store.dispatch(ActionCreators.undo()) // undo the last action 
store.dispatch(ActionCreators.redo()) // redo the last action 
 
store.dispatch(ActionCreators.jumpToPast(index)) // jump to requested index in the past[] array 
store.dispatch(ActionCreators.jumpToFuture(index)) // jump to requested index in the future[] array

配置

配置对象传递给undoable()(值是默认值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
undoable(reducer, {
  limit: false, // set to a number to turn on a limit for the history 
 
  filter: () => true, // see `Filtering Actions` section 
 
  undoType: ActionTypes.UNDO, // define a custom action type for this undo action 
  redoType: ActionTypes.REDO, // define a custom action type for this redo action 
 
  jumpToPastType: ActionTypes.JUMP_TO_PAST, // define custom action type for this jumpToPast action 
  jumpToFutureType: ActionTypes.JUMP_TO_FUTURE, // define custom action type for this jumpToFuture action 
 
  initialState: undefined, // initial state (e.g. for loading) 
  initTypes: ['@@redux/INIT', '@@INIT'] // history will be (re)set upon init action type 
  initialHistory: { // initial history (e.g. for loading) 
    past: [],
    present: config.initialState,
    future: []
  },
 
  debug: false, // set to `true` to turn on debugging 
})

过滤Actions

如果你不想包含每一步的action,可以传递一个函数到undoable

1
2
3
4
5
6
7
8
9
undoable(reducer, function filterActions(action, currentState, previousState) {
  return action.type === SOME_ACTION; // only add to history if action is SOME_ACTION只有some_action的action才能记录 
})
 
// or you could do... 
 
undoable(reducer, function filterState(action, currentState, previousState) {
  return currentState !== previousState; // only add to history if state changed只有state变化的才能记录重做 
})

或者你可以使用distinctState,includeAction,excludeAction助手函数

1
import undoable, { distinctState, includeAction, excludeAction } from 'redux-undo';

现在你可以使用助手函数了,相当简单

1
2
3
4
5
6
undoable(reducer, { filter: includeAction(SOME_ACTION) })
undoable(reducer, { filter: excludeAction(SOME_ACTION) })
 
// or you could do... 
 
undoable(reducer, { filter: distinctState() })

甚至还支持数组

1
2
 undoable(reducer, { filter: includeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, { filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })

有什么魔法？怎么工作的

Redux文档中的实现Undo历史的方案解释了redux-undo工作的具体细节.