mapStateToProps не обновляет компонент с переключенным состоянием

Question

новый пользователь в Redux, поэтому извиняюсь за любые глупые ошибки. В конечном итоге я пытаюсь переключить className в компоненте B, так как функция onClick переключает состояние в компоненте A.

Так и должно быть: Нажатие кнопки компонента A => переключение состояний => Переключение className компонента B.

Я настроил свой магазин, и моя функция 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 решил вашу проблему, поэтому я не буду решать ее снова, но я бы сказал, что вы можете сделать логику стилей c проще, используя имена классов library.

Ваш обратный вызов useEffect будет заменен на

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

, устраняя необходимость в каких-либо перехватах.