redux - Redux にはアクションを元に戻す方法が組み込まれていますか?

Question

ユーザーが下にスクロールするとアクションが実行されるアプリを構築しています。ユーザーが再び上にスクロールしたときにこれらのアクションを取り消すことができれば、基本的にはスクロールがアクションのタイム ラインをブラウズする方法に変わります。

これを行うための Redux の組み込みの方法はありますか? または、このためにミドルウェアを作成する必要がありますか?

Answer 1

簡単な元に戻す機能も作成したかったのですが、すべてのユーザーの状態をシリアル化してロードするredux-storageを備えたアプリを既に出荷していました。したがって、下位互換性を維持するために、 redux-undoがpast: []and で行うように、状態キーをラップするソリューションを使用できませんでしpresent:た。

代替案を探して、Dan のチュートリアルに触発されてオーバーライドし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
});

私にとって、これは魅力のように機能しますが、あまりきれいに見えません。これが良いアイデアか悪いアイデアか、そしてその理由があれば、フィードバックをいただければ幸いです;-)