redux undo/redo

Redux的文檔中提供一個能夠作undo/redo的解決辦法,實際是有previous,current,prew的對象,圍繞這數據的壓入和彈出來實現操做步驟的記憶,結合persist就能夠實現更強大的記憶功能.今天的這個加強組件實際把這個功能給包裝了一下,內部實現細節仍然沒有變.只須要把reducer用這個加強組件包裝一下就能夠用了.

redux undo/redo

提示:你能夠使用redux-undo-boilerplate來開始項目.

Installation

npm install --save redux-undo
複製代碼

API

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

// Redux utility functions 
import { combineReducers } from 'redux';
// redux-undo higher-order reducer 
import undoable from 'redux-undo';
複製代碼

接着,添加undoable到你的reducer

combineReducers({
  counter: undoable(counter)
})
複製代碼

配置項想這樣傳遞

combineReducers({
  counter: undoable(counter, {
    limit: 10 // set a limit for the history 
  })
})
複製代碼

歷史API

使用reducer包裝你的reducer想這樣

{
  past: [...pastStatesHere...],
  present: {...currentStateHere...},
  future: [...futureStatesHere...]
}
複製代碼

如今你能夠使用state.present獲取當前的state 獲取全部過去的state使用state.past.

Undo/Redo Actions

首先導入undo/redo action creators

import { ActionCreators } from 'redux-undo';
複製代碼

而後就能夠使用store.dispatch()和undo/redo action creators來執行undo/redo操做.

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()(值是默認值)

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

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助手函數

import undoable, { distinctState, includeAction, excludeAction } from 'redux-undo';
複製代碼

如今你能夠使用助手函數了,至關簡單

undoable(reducer, { filter: includeAction(SOME_ACTION) })
undoable(reducer, { filter: excludeAction(SOME_ACTION) })
 
// or you could do... 
 
undoable(reducer, { filter: distinctState() })
複製代碼

甚至還支持數組

undoable(reducer, { filter: includeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, { filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
複製代碼

有什麼魔法？怎麼工做的

Redux文檔中的實現Undo歷史的方案解釋了redux-undo工做的具體細節.