如何使用 redux 时间旅行并将其绑定到 ctrl + z 和 ctrl + shift + z 键绑定

How to use redux time travel and bind it to ctrl + z and ctrl + shift + z keybinds?

本文关键字：绑定 ctrl shift redux 何使用 时间 旅行      更新时间：2023-09-26

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

我

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

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

如果你想跟踪用户的历史记录，你可以在你的存储中分配一个数组，并允许每个操作进入，否则你可以使用Window.localStorage来获得更持久的状态。在途中，我用"撤消/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();

使用中间件将 redux 存储的字符串化版本存储在 localStorage 中。该中间件在触发时侦听关键事件，它从本地存储等加载最后一个状态。

相关文章：