Javascript MapStateTops未使用切换状态更新组件

新用户要重新使用，所以为任何愚蠢的错误道歉。最后，我尝试切换组件B中的类名，因为onClick函数切换组件a中的状态

因此，它应该是： 组件A按钮点击=>状态切换=>组件B类名切换

我已经设置了我的应用商店，我的mapDispatchToProps功能改变了应用商店中的状态，该功能似乎正在运行。但是，在其他组件中调用此状态正在工作。。。但是，不会在存储区中的状态切换时重新渲染。我的代码中有更多的内容，但我已经尝试剥离了这个问题不需要的部分

组件A-包含切换状态和更改my store/rootReducer中状态的按钮：

import React from 'react';
import { connect } from 'react-redux';


function Nav(props) {
  const [showMenu, setShowMenu] = React.useState('menuClosed');

  function menuClick() {
    showMenu === 'menuClosed' ? setShowMenu('menuOpen') :
      setShowMenu('menuClosed');
  }

  // this works fine, I know this due to the console.log on my rootReducer page:
  React.useEffect(() => {
    props.toggleMenu(showMenu);
  }, [showMenu])


  return (
    <button className="hvr-icon-grow-rotate" id="bars" onClick={() => { menuClick(); }}>
      <FontAwesomeIcon icon={faBars} className="hvr-icon" />
    </button>
  )
}

const mapStateToProps = (state) => {
  return {
    menu: state.menu
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    toggleMenu: (showMenu) => {
      dispatch({ type: 'TOGGLE_MENU', menu: showMenu })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Nav)

---

任何帮助都将不胜感激-谢谢

看起来你实际上并没有在减速器中切换任何东西

如果希望更改，则需要返回新状态。我不确定在你的情况下它应该是什么样子，但类似这样：

constrootreducer=（state=initState，action）=>{
让newState={…state}；//创建一个新的state对象，这样我们就不会改变原始状态
开关（action.type）{//检查发送的是什么类型，看看是否应该更新
案例“切换菜单”：
newState.menu=action.menu；//根据操作设置新状态
返回新闻状态；
违约：
返回状态；//如果没有更改，则返回旧状态
}
}

---

旁注：看起来您的初始状态将菜单作为一个数组，但您的组件并不将其视为一个数组。它似乎应该被默认为字符串。

它看起来不像是在您的减速机中实际切换任何东西

如果希望更改，则需要返回新状态。我不确定在你的情况下它应该是什么样子，但类似这样：

constrootreducer=（state=initState，action）=>{
让newState={…state}；//创建一个新的state对象，这样我们就不会改变原始状态
开关（action.type）{//检查发送的是什么类型，看看是否应该更新
案例“切换菜单”：
newState.menu=action.menu；//根据操作设置新状态
返回新闻状态；
违约：
返回状态；//如果没有更改，则返回旧状态
}
}

---

旁注：看起来您的初始状态将菜单作为一个数组，但您的组件并不将其视为一个数组。它似乎应该默认为字符串。

看起来@brian thompson已经解决了您的问题，所以我不会再解决它了，但我想说，您可以通过使用该库使样式逻辑更容易记录

您的useEffect回调将替换为

const { menu } = props
const noHover = classNames({
  'projectGrid': true,
  'noHover': menu === 'menuOpen'
})

---

不再需要任何钩子。

看起来@brian thompson已经解决了您的问题，所以我不会再解决它了，但我想说，您可以通过使用该库使样式逻辑更容易成为日志

您的useEffect回调将替换为

const { menu } = props
const noHover = classNames({
  'projectGrid': true,
  'noHover': menu === 'menuOpen'
})

不需要任何挂钩

const { menu } = props
const noHover = classNames({
  'projectGrid': true,
  'noHover': menu === 'menuOpen'
})