Question

我正在构建一个应用程序，在用户向下滚动时执行操作。如果我可以在用户再次向上滚动时撤消这些操作，那将是很好的，基本上将滚动变为浏览行动时间线的方式。

Redux中是否有内置方式来执行此操作？或者我是否必须为此编写中间件？

Answer 1

Redux中是否有内置方式来执行此操作？或者我是否必须为此编写中间件？

在这种情况下，中间件听起来像是错误的想法，因为这纯粹是对国家管理的关注。相反，你可以编写一个带有reducer并返回reducer的函数，在此过程中通过动作历史跟踪“增强”它。

我在this answer中概述了这种方法，它类似于redux-undo的工作方式，除了不存储状态，您可以存储操作。（取决于你想要做出的权衡，以及能否以不同的顺序“取消”行动是否重要。）

Answer 2

我相信这个想法不是“撤消”，而是每次动作通过redux时保存对整个状态树的引用。

在不同的时间，你会有一个由应用程序状态组成的历史堆栈。

let history = [state1, state2, state3]

// some action happens

let history = [state1, state2, state3, state4]

// some action happens

let history = [state1, state2, state3, state4, state5]

// undo an action

let history = [state1, state2, state3, state4]

state = state4

要“撤消”某个操作，只需将应用程序状态替换为其中一个已保存的状态。

这可以通过支持结构共享的数据结构来提高效率，但在开发过程中，我们并不需要过多考虑资源限制。

Answer 3

我还想创建一个简单的撤消功能，但是已经发布了一个带有redux-storage的应用程序，它为每个用户序列化并加载状态。因此，为了保持向后兼容，我无法使用任何包含我的状态键的解决方案，例如redux-undo与past: []和present:一起使用。

寻找替代方案，Dan's tutorial激励我覆盖combineReducers。现在我有一部分状态：history可以保存最多10个状态的其余部分，并在UNDO动作中弹出它们。这是代码，这也适用于您的情况：

function shouldSaveUndo(action){
  const blacklist = ['@@INIT', 'REDUX_STORAGE_SAVE', 'REDUX_STORAGE_LOAD', 'UNDO'];

  return !blacklist.includes(action.type);
}

function combineReducers(reducers){
  return (state = {}, action) => {
    if (action.type == "UNDO" && state.history.length > 0){
      // Load previous state and pop the history
      return {
        ...Object.keys(reducers).reduce((stateKeys, key) => {
          stateKeys[key] = state.history[0][key];
          return stateKeys;
        }, {}),
        history: state.history.slice(1)
      }
    } else {
      // Save a new undo unless the action is blacklisted
      const newHistory = shouldSaveUndo(action) ?
        [{
          ...Object.keys(reducers).reduce((stateKeys, key) => {
            stateKeys[key] = state[key];
            return stateKeys;
          }, {})
        }] : undefined;

      return {
        // Calculate the next state
        ...Object.keys(reducers).reduce((stateKeys, key) => {
          stateKeys[key] = reducers[key](state[key], action);
          return stateKeys;
        }, {}),
        history: [
          ...(newHistory || []),
          ...(state.history || [])
        ].slice(0, 10)
      };
    }
  };
}


export default combineReducers({
  reducerOne,
  reducerTwo,
  reducerThree
});

对我而言，这就像一个魅力，它看起来不是很漂亮。如果这是一个好/坏想法以及为什么，我会很高兴得到任何反馈; - ）

Answer 4

没有内置方法可以做到这一点。但是你可以从redux-dev-tools的工作原理中获得灵感（https://github.com/gaearon/redux-devtools）。它基本上具有“时间旅行”功能，它通过跟踪所有操作并每次重新评估它们来工作。因此，您可以轻松浏览所有更改。

Redux是否有内置的撤消操作的方法？

4 个答案: