在反应中检测刷新事件

Question

我目前正在使用带有向导表单的 React redux。我现在运行遇到了需要在表单中保留数据或仅刷新数据但让用户知道的问题。

目前所有内容都存储在多个 redux 状态中。

有没有办法检测用户的 "refresh" 事件？我很可能会使用本地存储，但我对第一个选项很好奇，想知道它是否可行。

Answer 1

如果你想检测刷新事件，它与 React 无关，而是使用名为 window.onbeforeunload

的普通 Javascript 事件处理程序

window.onbeforeunload = (e) => {
// I'm about to refresh! do something...
};

但是我认为这不是存储 Redux store 的正确方法，相反你可以这样做：

// load state from localStorage
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
     if (serializedState === null) {
       return undefined; // reducer will return Redux state, as localstorage is null.
     }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};

const saveToLocalStorage = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (err) {
    // ignore error
  }
};

store.subscribe(() => {
  saveToLocalStorage(store.getState()); // save current state to localstorage.
});

在反应中检测刷新事件

Detecting a refresh event in react

refresh

reactjs

redux