redux-undo

Posted 2020-08-19 喵～

简介

　　通过包装reducer，创建一个state History，保留历史state，可以做退一步，进一步操作

 

1.install

npm install --save redux-[email protected]
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(-2)) // undo 2 steps
store.dispatch(ActionCreators.jump(5)) // 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: [0, 1, 2, 3],
  present: 4,
  future: [5, 6, 7]
}

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 === 0; // 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是做什么的，看到，请帮我解惑，在此谢过