Как изменить состояние переключения меню при изменении маршрута с помощью Redux - PullRequest
Новая
       11

Как изменить состояние переключения меню при изменении маршрута с помощью Redux

0 голосов
/ 29 июня 2018

Я хочу изменить состояние меню при изменении маршрута, но не могу заставить его работать.

Проблема, с которой я сталкиваюсь: когда я нажимаю на ссылку из панели навигации. Маршрут меняется, но не закрывается. Как изменить состояние меню при изменении маршрута? Может ли помочь мне с этим реакция-маршрутизатор-избыточность?

АКЦИЯ 

export function menuToggle(currentState) {
  return {
    type: 'MENU_TOGGLE',
    payload: {
      ToggleMenu: !currentState,
    },
  };
}

REDUCER 

const initialState = {
  showMenu: false,
};

export const MenuToggle = (state = initialState, action) => {
  switch (action.type) {
    case MENU_TOGGLE:
      return {
        showMenu: action.payload.ToggleMenu,
      };
    default:
      return state;
  }
};

КОМПОНЕНТ 

class Header extends Component {
  componentWillMount() {
    document.addEventListener('click', this.handleClickOutside, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, false);
  }

  handleClickOutside = e => {
    if (!ReactDOM.findDOMNode(this).contains(e.target)) {
      this.props.showMenu === true && this.props.menuToggle(!false);
    }
  };

  render() {
    return (
      <Head>
        <Brand>BRAND</Brand>
        <MenuButton
          onClick={this.props.menuToggle.bind(null, this.props.showMenu)}
        >
          MENU
        </MenuButton>
        <MobileMenu showMenu={this.props.showMenu} />
      </Head>
    );
  }
}

const mapStateToProps = state => {
  return {
    showMenu: state.MenuToggle.showMenu,
  };
};

const mapDispatchToProps = { menuToggle };

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Header);

ДЕТСКИЙ КОМПОНЕНТ 

const MobileMenu = ({ showMenu }) => {
  return (
    showMenu === true && (
      <Nav>
        <Ul>
          <Li>
            <A to="/">
              <Span>Home</Span>
            </A>
          </Li>
          <Li>
            <A to="/shop">
              <Span>Shop</Span>
            </A>
          </Li>
          <Li>
            <A to="/contact">
              <Span>Contact</Span>
            </A>
          </Li>
        </Ul>
      </Nav>
    )
  );
};

export default MobileMenu;

1 Ответ

0 голосов
/ 01 июля 2018

Да, ответ-маршрутизатор-редукс может помочь вам. Вы можете прослушать LOCATION_CHANGE в своем редукторе и отключить "showMenu".

...