Redux в NextJS - PullRequest
Новая
       21

Redux в NextJS

0 голосов
/ 08 мая 2018

У меня проблемы с действиями в Redux с моим приложением NextJS. Я думаю, это будет относительно похоже на реализацию Redux в любом другом приложении React, но я не могу заставить свои действияогонь выключенПрошло некоторое время с тех пор, как я прикоснулся к Redux, так что может быть что-то действительно очевидное, что я скучаю, но я потратил несколько часов, пытаясь устранить его.Когда ширина моего окна достигает 600px, у меня появляется точка останова, которая показывает значок гамбургера, и я хочу, чтобы он добавил класс «open» к моей панели навигации.Вот мой репо.https://github.com/nicer00ster/nicer00ster-blog

1 Ответ

0 голосов
/ 16 мая 2019

добавьте eventListener для обработки изменения размера окна, а затем отметьте innerWidth из window, чтобы вызвать ваше действие. 


import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { toggleMenu } from '../../actions'
import Sidebar from './Sidebar';

import Nicer00ster from '-!svg-react-loader?name=Nicer00ster!../../images/svg/nav/nicer00ster.svg';
import Smartphone from '-!svg-react-loader?name=Smartphone!../../images/svg/nav/smartphone.svg';
import House from '-!svg-react-loader?name=House!../../images/svg/nav/house.svg';
import Telephone from '-!svg-react-loader?name=Telephone!../../images/svg/nav/telephone.svg';


class Navbar exntends React.Component {
  constructor() {
    super();
    this.onWindowResize = this.onWindowResize.bind(this);
  }
  componentDidMount() {
      window.addEventListener('resize', onWindowResize);
   }
   onWinodwResize() {
    if (window.innerWidth < 600 && !this.props.isOpen)
      this.props.toggleMenu();
    }
  render() {
   const {isOpen, toggleMenu} = this.props;
   return (
    <div>
      <div className={ isOpen ? "navbar open" : "navbar" }>
          <ul className="navbar__links">
            <li className="navbar__item">
              <Link to="/">
                <Nicer00ster className="logo" width={200} height={100}/>
              </Link>
              <Sidebar />
            </li>
          </ul>
          <ul className="navbar__navigation">
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/">
                <a className="navbar__link">
                  <House className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Home</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/blog">
                <a className="navbar__link">
                  <Telephone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Blog</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/work">
                <a className="navbar__link">
                  <Smartphone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Work</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/contact">
                <a className="navbar__link">
                  <Telephone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Contact</span>
                </a>
              </Link>
            </li>
          </ul>
      </div>
      <Sidebar isOpen={isOpen} />
    </div>
  )
}

export default connect(function(state) {
  return { isOpen: state.app.open }
}, { toggleMenu })(Navbar);
...