简介
通过包装reducer，创建一个state History，保留历史state，可以做退一步，进一步操作
1.install
npm install --save redux-undo@beta
import ReduxUndo from 'redux-undo';
2.API（包装reducer，其中config参数为history配置）
import undoable from 'redux-undo';
undoable(reducer)
undoable(reducer, config)
2.1 和 combineReducers 配合使用
combineReducers({
counter: undoable(counter)
})
3.History API
3.1 包装后的renducers 变成了，可通过state.present (获取当前), state.past (获取过去)
{
past: [...pastStatesHere...],
present: {...currentStateHere...},
future: [...futureStatesHere...]
}
4.发起撤销重做 Undo/Redo Actions
store.dispatch(ActionCreators.undo()) // undo the last action 退一步
store.dispatch(ActionCreators.redo()) // redo the last action 进一步 store.dispatch(ActionCreators.jump(-)) // undo 2 steps
store.dispatch(ActionCreators.jump()) // redo 5 steps 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 store.dispatch(ActionCreators.clearHistory()) // [beta only] Remove all items from past[] and future[] arrays
5.配置项config
undoable(reducer, {
limit: false, // set to a number to turn on a limit for the history // 保存到历史的数量
filter: () => true, // see `Filtering Actions` section //过滤一部分action，不记录/记录在history
undoType: ActionTypes.UNDO, // define a custom action type for this undo action
redoType: ActionTypes.REDO, // define a custom action type for this redo action
jumpType: ActionTypes.JUMP, // define custom action type for this jump 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
clearHistoryType: ActionTypes.CLEAR_HISTORY, // [beta only] define custom action type for this clearHistory action
initTypes: ['@@redux-undo/INIT'] // history will be (re)set upon init action type
debug: false, // set to `true` to turn on debugging
neverSkipReducer: false, // prevent undoable from skipping the reducer on undo/redo
})
6.初始化，history， （看这个了解到，其实就是把 app 的 state={ todos:[], visiFilter:'showAll' } 包装一层，变成下面的形式
import { createStore } from 'redux';
const initialHistory = {
past: [, , , ],
present: ,
future: [, , ]
}
const store = createStore(undoable(counter), initialHistory);
1.不初始化历史，只定义当前
import { createStore } from 'redux';
const store = createStore(undoable(counter), {foo: 'bar'});
// will make the state look like this:
{
past: [],
present: {foo: 'bar'},
future: []
}
7.Filtering Actions （通过config）
7.1 用于过滤，记录进History的state
7.2 包含include， 排除exclude
import undoable, { includeAction, excludeAction } from 'redux-undo';
undoable(reducer, { filter: includeAction(SOME_ACTION) })
undoable(reducer, { filter: excludeAction(SOME_ACTION) })
// they even support Arrays:
undoable(reducer, { filter: includeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, { filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
7.3 加入更多逻辑过滤 Custom filters
undoable(reducer, {
filter: function filterActions(action, currentState, previousHistory) {
return action.type === SOME_ACTION; // only add to history if action is SOME_ACTION
}
})
// The entire `history` state is available to your filter, so you can make
// decisions based on past or future states:
undoable(reducer, {
filter: function filterState(action, currentState, previousHistory) {
let { past, present, future } = previousHistory;
return future.length === ; // only add to history if future is empty
}
})
7.4 合并多个filter函数
import undoable, {combineFilters} from 'redux-undo'
function isActionSelfExcluded(action) {
return action.wouldLikeToBeInHistory
}
function areWeRecording(action, state) {
return state.recording
}
undoable(reducer, {
filter: combineFilters(isActionSelfExcluded, areWeRecording)
})
7.5 忽略指定的action---- Ignoring Actions
import { ignoreActions } from 'redux-ignore'
ignoreActions(
undoable(reducer),
[IGNORED_ACTION, ANOTHER_IGNORED_ACTION]
)
// or define your own function:
ignoreActions(
undoable(reducer),
(action) => action.type === SOME_ACTION // only add to history if action is SOME_ACTION
)
Note: Since beta4, only actions resulting in a new state are recorded. This means the (now deprecated) distinctState()filter is auto-applied.
这句话的意思应该是：从beta4 开始，只有触发 action 产生的 state 才会记录在 history， 有redo/undo 产生的是不会被记录的，可以使用distinctState() 兼容
然而我并不明白istinctState是做什么的，看到，请帮我解惑，在此谢过