Burger Menu с React Redux не работает

Question

Я пытаюсь сделать свое собственное меню гамбургеров в реагирующем редуксе.Но у этого есть некоторые проблемы, которые делают это, и другие компоненты не могут быть предоставлены.Это мой actions.js:

const TOGGLE_MENU = 'TOGGLE_MENU';

export const toggleMenu = () => {
  return {
    type: TOGGLE_MENU
  };
};

Это мой burgerMenu.js - редуктор:

const burgerMenu = (state = { isToggled: false }, action) => {
  switch (action.type) {
    case TOGGLE_MENU:
        return { isToggled: !state.isToggled };
    default:
        return state;
  }
}

export default burgerMenu;

BurgerMenuContainer.js - компонент контейнера:

import BurgerMenu from './BurgerMenu'
import { toggleMenu } from '../actions';

const mapStateToProps = state => {
  return { isToggled: state.isToggled };
};

const mapDispatchToProps = dispatch => {
  return { onClick: () => dispatch(toggleMenu()) };
};

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

BurgerMenu.js - компонент представления:

const BurgerMenu = ({ isToggled, onClick }) => (
    <div onClick={ onClick } className={isToggled ? "burger-menu" : "burger-menu menu-on"}>
        <div className="burger"></div>  
    </div>
);

BurgerMenu.propTypes = {
  onClick: PropTypes.func.isRequired,
  isToggled: PropTypes.bool.isRequired
};

export default BurgerMenu;

И Header.js содержит контейнер меню бургера:

import BurgerMenuContainer from './BurgerMenuContainer';

const Header = (props) => {
  return (
  <header className="header">
    <BurgerMenuContainer/>
  </header>);
}

export default Header;