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'
})

無需任何掛鈎。