React redux：如何在按下后退按钮时清除 redux 存储状态

【问题标题】：React redux: how to clear the redux store state on back button pressReact redux：如何在按下后退按钮时清除 redux 存储状态
【发布时间】：2021-09-24 10:23:08
【问题描述】：

我正在使用具有以下结构的 react redux 组合：

<div>
  // Material ui autocomplete component which sets value in redux store
  <Switch>
  <Route exact path="/abc"><CompA/></Route>
<Route path="/abc/add"><CompB/></Route>
</Switch>
</div>

如果我在 /abc/add 页面上并单击浏览器后退按钮，则不会清除商店，但如果我在此之后刷新页面，则会清除商店。如何在按下后退按钮时清除它？

提前致谢。

【问题讨论】：

标签： reactjs react-redux back

【解决方案1】：

您可以使用useEffect 清理函数或componentWillUnmount 函数来清除redux 状态。

例如：

store.js

export const resetStore = () => ({
  type: STORE_NAME_RESET
});

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case STORE_NAME_RESET:
      return initialState;
    default:
      return state;
  }
}

CompB.js

// React hooks

const CompB = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    return dispatch(resetStore());
  }, []);

  return <div></div>;
};

// React class component

class CompB extends React.Component {
  componentWillUnmount() {
    this.props.resetStore();
  }
}

export default connect(null, { resetStore })(AddTodo)

【讨论】：

当我从 /abc 页 R8 转到 /abc/add 时，这不会导致任何问题吗？在那种情况下R8不会清除商店？