使用 Redux 更改路由时如何更改菜单切换状态答案

【问题标题】：How can I change menu toggle state when route changed with Redux使用 Redux 更改路由时如何更改菜单切换状态
【发布时间】：2018-12-08 08:01:49
【问题描述】：

我想在路由更改时更改菜单状态但无法使其工作。

我面临的问题：当我点击导航栏中的链接时。路线改变，但不会关闭。路线更改时如何更改菜单状态？ react-router-redux 可以帮我解决这个问题吗？

动作

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

减速器

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;

【问题讨论】：

你能检查一下你在 mapStateToProps 上得到的值是否正确吗？
是的，它工作得很好。

标签： javascript reactjs redux menu toggle

【解决方案1】：

是的 react-router-redux 可以帮助你。您可以在减速器中收听 LOCATION_CHANGE 并关闭“showMenu”。

【讨论】：