mapStateToProps 不更新具有切换状态的组件

Question

Redux 的新用户，对于任何愚蠢的错误深表歉意。 最终，我试图在组件 B 中切换一个类名，因为 onClick 函数在组件 A 中切换一个状态。

所以它应该是：组件 A 按钮单击 => 状态切换 => 组件 B className 切换。

我已经设置了我的商店，我的 mapDispatchToProps 函数改变了我商店的状态似乎正在工作。 但是，在不同的组件中调用此状态是有效的......但是，不会随着商店中的状态切换而重新呈现。 我的代码中有更多的内容，但我已经尝试删除了这个问题不需要的部分。

组件 A - 包含一个按钮，用于切换状态并更改我的商店/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)

组件 B：应该根据商店状态切换类名：

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

const [noHover, setNoHover] = React.useState('projectGrid');

  React.useEffect(() => {
    console.log('portfolio props: ' + props.menu + ' noHover: ' + noHover);
    if (props.menu === 'menuOpen') {
      setNoHover('projectGrid noHover');
      console.log('portfolio props: ' + props.menu + ' noHover: ' + noHover);
    }
    else if (props.menu === 'menuClosed') {
      setNoHover('projectGrid');
      console.log('portfolio props: ' + props.menu + ' noHover: ' + noHover);
    }
  }, [])

  return (<div className={noHover}>some content</div>);
}

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

export default connect(mapStateToProps)(PortfolioItem)

最后，我的 rootReducer.js 页面或 Redux 商店的内容：

const initState = {
  menu: ['menuClosed']
}

const rootReducer = (state = initState, action) => {
  console.log(action);
  return state;
}

export default rootReducer;

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

Answer 1

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

如果你想让它改变，你需要返回一个新的状态。 我不确定在你的情况下它应该是什么样子，但是是这样的：

const rootReducer = (state = initState, action) => {
  let newState = {...state}; // Create a new state object so we don't mutate original
  switch(action.type) { // Check what type was sent to see if we should update
    case 'TOGGLE_MENU':
      newState.menu = action.menu; // Set new state based on action
      return newState;
    default:
      return state; // Return old state if nothing changed
  }
}

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

Answer 2

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

您的 useEffect 回调将替换为

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

无需任何挂钩。