React redux：如何在按下后退按钮时清除 redux 商店 state

Question

我正在使用具有以下结构的 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 页面上并单击浏览器后退按钮，它不会清除商店，但如果我刷新页面后它会清除商店。 如何在按下后退按钮时清除它？

提前致谢。

Answer 1

可以使用useEffect cleanup function 或componentWillUnmount function 来清除 redux Z967339E2EA99AZEF858。

例如：

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)

Answer 2

你可以试试这个； 在 action.js 中设置您希望后退按钮执行的操作

export const RESET_ON_BACK_BUTTON = "RESET_ON_BACK_BUTTON"; 
export const onButtonReset = () => ({
type: RESET_ON_BACK_BUTTON,
});

然后像这样设置你的 reducer.js 文件

case RESET_ON_BACK_BUTTON:
      return {
        ...state,
        backToPreviousPageInProgress: false,
        previousPageData: null,
      };

然后像这样调用 onButtonReset()

onClick = () => onButtonReset();