javascript - 如何使用 redux 时间旅行并将其绑定(bind)到 ctrl + z 和 ctrl + shift + z 键绑定(bind)？

Question

我有一个编辑器应用程序，可以通过 redux 状态广告/更改/删除不同的 View ，我认为如果我可以通过 redux 时间旅行实现 ctrl+z 和 ctrl+shift+z ，这可能会非常有用，因为这意味着在用户错误删除元素的情况下获得更好的用户体验。

我试图阅读有关 redux 时间旅行的内容，但与之相关的所有内容都让我找到了 devtools 文章，因此我想看看你们是否知道任何好的资源或可以展示实现此功能的示例？

我的主要问题是在捕获关键事件后弄清楚逻辑。

Answer 1

如果您想跟踪用户的历史记录，您可以在商店内分配一个数组并允许每个操作进入，否则您可以使用 Window.localStorage以获得更持久的状态。 我以某种方式写下了一个相当简单的示例，其中包含“undo/CTRL+Z”监听器:

const rnd = (state = {
  num: 0,
  prev: []
}, action) => {
  switch (action.type) {
    case 'POPHISTORY':
      if (state.prev.length > 1) {
        state.num = state.prev[state.prev.length - 2];
        state.prev.splice(-1, 1);

      }
      return state;
        // Add a new number 
    case 'RND':
      const num = Math.round(Math.random() * 100);
            //push into the tracking array
      state.prev.push(num);
            //update the current number
      state.num = num;
      return state;
    default:
      return state;
  }
}

// JSX
const Counter = ({state, onRnd}) => (
  <div>
    <h2>{state.num}</h2>
    <h2>Previous numbers count:
      {state.prev.length}</h2>
    <button onClick={onRnd}>New number</button>
  </div>
);

// Create the store
const {createStore} = Redux;
const store = createStore(rnd); // bind reducers

//Listen for CTRL+Z
function KeyPress(e) {
  const evtobj = window.event
    ? event
    : e
  if (evtobj.keyCode == 90 && evtobj.ctrlKey) {
    store.dispatch({type: 'POPHISTORY'})
  }
}
//bind the listener
window.onkeydown = KeyPress;

//Create the renderer
const render = () => {
  ReactDOM.render(
    <Counter state={store.getState()} onRnd={() => store.dispatch({type: 'RND'})}/>, document.getElementById('root'));
};
// Combine React and Redux
store.subscribe(render);
render();