redux-undo

Posted 喵~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了redux-undo相关的知识,希望对你有一定的参考价值。

简介

  通过包装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是做什么的,看到,请帮我解惑,在此谢过

以上是关于redux-undo的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器