Question

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

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

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

Answer 1

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

Answer 2

如果您想跟踪用户的历史记录，您可以在商店内部分配一个数组并允许每个操作进入，否则您可以使用Window.localStorage获得更持久的状态。在路上或另一个地方，我写了一个相当简单的例子，用＆＃34;撤消/ CTRL + Z＆＃34;听众：

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时间旅行并将其绑定到ctrl + z和ctrl + shift + z键绑定？

2 个答案: