本文不是 redux-undo 的 GetStart，所以在阅读之前最好先了解redux-undo。文章只是简单的介绍笔者使用 redux-undo 时所遇到的问题及解决方法。
什么是redux-undo？
higher order reducer to add undo/redo functionality to redux state containers.
原理
简单来说，redux-undo将reducer 分为：past，present，future。past 和 future 都是数组，分别记录 undo 和 redo，present 就是当前的 reducer。例如使用 redux-undo 前是这样子使用：state.counter，那么使用后需要这样子用：state.counter.present。
详情请参考：
Implementing Undo History
redux-undo
配置 undoableConfig
使用 redux-undo 方法如下：
import undoable from 'redux-undo';
undoable(reducer, undoableConfig)
重点是 undoableConfig 中的 groupBy 和 filter。二者皆为一个函数，可以使用 groupByActionTypes、includeAction、excludeAction，也可以使用自定义的函数。filter还可以使用 combineFilters 将自定义filter 和includeAction、excludeAction组合使用。
groupBy
在使用 redux-undo 时有这么一个场景。比如说一个 input 的状态放在 redux，onChange 时会发 action(UPDATE_INPUT) 更新 store。如果想使用 redux-undo 监听这个 input 的输入记录。
const undoableConfig = {
filter: includeAction([UPDATE_INPUT]}
}
那么此时 input 的每次修改都会记录在 undo past 中，输入一个 "input" 字符串会记录5次，这样子显然是不行的。我希望的是只记录一次，所以就需要 groupBy 来配合了。
import undoable, { groupByActionTypes } from 'redux-undo'
const undoableConfig = {
filter: includeAction([UPDATE_INPUT],
groupBy: groupByActionTypes(UPDATE_INPUT),
}
此时就已经实现了 input 的输入只会记录一次，非常棒。但是此时假设需要在 input value 的长度小于5时只记录一次，大于5以后每次修改都记录呢？这时候 groupByActionTypes 就玩不转了。但是别忘了 groupBy 就是一个函数，groupByActionTypes 只是作者提供的一个通用的方法。要实现刚才的需求就需要我们自定义 groupBy 方法了。
import { get } from 'lodash'
const undoableConfig = {
filter: includeAction([UPDATE_INPUT],
groupBy: (action) => get(action, 'payload.undoableGroupName', null),
}
这样子，在需要 groupBy 的时候传入一个参数 undoableGroupName，相同的 undoableGroupName 连续的 action 就只会记录一步。若 undoableGroupName 值则为 null，连续的 action 则不会被分组。
filter
上文已经简单介绍过 filter，简单来说就是筛选出需要记录的 actionTypes。那 redux-undo 既然已经提供了 includeAction，还有什么可说的呢？来看下面这个案例。假设有一个 ACTION_A 是需要记录的，那应该这样子用：
import undoable, { includeAction } from 'redux-undo'
const undoableConfig = {
filter: includeAction([ACTION_A]
}
很简单就能实现。那若是有这么一个 action，在 someAction 中 ACTION_A 就不需要记录。
export const someAction = (var1, var2) => {
return function (dispatch) {
dispatch(subAction_A_ToReducerA(var1))
dispatch(subAction_B_ToReducerB(var2))
}
}
export const subAction_A_ToReducerA = (var1) => {
return {
type: ACTION_A,
var1: var1
}
}
export const subAction_B_ToReducerB = (var2) => {
return {
type: ACTION_B,
var2: var2
}
}
要怎么实现呢？这时候就需要我们自定义 filter 了。redux-undo 提供了 combineFilters 方法，可以将 includeAction 和 customFilter 结合起来。比如像这样：
import undoable, { includeAction } from 'redux-undo'
const undoableConfig = {
filter: combineFilters(
includeAction([ACTION_A],
customFilter
)
}
const customFilter = (action) => !get(action, 'payload.undoableFiltered', false)
这样，someAction 也需要做一定的修改。someAction 中的 ACTION_A 就会被 filter 掉，不被记录下来。
export const someAction = (var1, var2) => {
return (dispatch) => {
const undoableFiltered = true
dispatch(subAction_A_ToReducerA(var1, undoableFiltered))
dispatch(subAction_B_ToReducerB(var2))
}
}
export const subAction_A_ToReducerA = (var1, undoableFiltered) => {
return {
type: ACTION_A,
undoableFiltered: undoableFiltered,
var1: var1
}
}
以上就是笔者在实践中遇到的特殊情况，幸运的是巧妙的使用 groupBy 和 filter解决了以上问题。
参考：
