Блог

Я использую комбинацию 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 и нажимаю кнопку «Назад» браузера, это не очищает магазин, но если я обновлю страницу после этого, она очистит магазин. Как я могу очистить его при нажатии кнопки «Назад»?

Заранее спасибо.

Вы можете использовать useEffect функцию очистки или componentWillUnmount функцию для очистки состояния восстановления.

Например:

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)