How can redefine initial state on my reducer, when I change the component

Question

More details :

I have a component called header inside I have a menu, when I'm in mobile device I have a burger menu.

When I clicked on this burger menu, I set a state at true and the menu become open, when I clicked on a cross, the state become false and the menu is close.

Now the problem :

If I change component is save always the previous state, If menu it's open and click on home for example, the state it's actually at true and in my home the menu it's open, and I don't want this comportement.

Do you have some advice ?

Look the code :

// ACTION : 

export const setBurgerMenu = createAction(
  SET_BURGER_MENU,
  () => ({})
);

export const getBurgerMenu = () => {
  return dispatch => {
    dispatch(setBurgerMenu());
  };
};

// REDUCER : 
// Initial state contain isOpenMenu at false
const reducer = handleActions({
  [SET_BURGER_MENU]: (state) => {
    return {
      ...state,
      isOpenMenu: !state.isOpenMenu
    };
  },
  [BREADCRUMBS_WILL_UPDATE]: (state) => {
    return {
      ...state,
      isWillUpdate: true
    };
  },
  [BREADCRUMBS_UPDATED]: (state) => {
    return {
      ...state,
      isWillUpdate: false
    };
  },
  [CLEAR_USER_DATA]: () => {
    return {
      ...initialState
    };
  }
}, initialState);

Answer 1

You could use the componentWillUnmount or the componentWillMount methods on the components

Using componentWillUnmount on first component:

componentWillUnmount() {
  if (this.props.isMenuOpen) this.props.setBurgerMenu()
}

Using componentWillMount on second component:

componentWillMount() {
  if (this.props.isMenuOpen) this.props.setBurgerMenu()
}