NextJS 中的 Redux

Question

我的 NextJS 应用程序在 Redux 中的 Actions 遇到问题。我想这与在任何其他 React 应用程序中实现 Redux 相对相似，但我终其一生都无法完成我的操作熄火。自从我接触 Redux 以来已经有一段时间了，所以很明显我错过了一些东西，但我花了几个小时试图解决它。当我的窗口宽度达到 600 像素时，我有一个显示汉堡图标的断点，我希望它将“打开”类添加到我的导航栏。这是我的回购。 https://github.com/nicer00ster/nicer00ster-blog

Answer 1

添加一个eventListener 来处理窗口大小调整，然后检查window 的innerWidth 来调用您的操作。

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);