reactjs - 调度在触发它的功能中不起作用

Question

我在我的应用程序中使用 react-redux 和 redux 工具包，每次触发事件时，我都会将状态更改（布尔值）发送到与其现有状态相反的状态。

状态每次在 Redux DevTools 以及同一组件中的单独 useEffect() 函数中都会成功更改，但在实际调度的函数中没有按预期工作，这是我计划对基于我的 UI 进行一些必要更改的地方关于那个状态变化。

这是我在 Header.js 中触发调度的组件的截断版本：

import React, { useEffect } from 'react';
import SideNav from './SideNav'; 
import Nav from './Nav'; 
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useSelector, useDispatch } from 'react-redux'; 
import { selectShowSideNav, showSideNav } from '../features/sideNavSlice';

const Header = () => {
  const sideNavState = useSelector(selectShowSideNav)
  const dispatch = useDispatch();

  useEffect(() => {
    sideNavState.toggleSideNav ? console.log(true) : console.log(false);   // click1 = true, click2 = false
  }, [sideNavState.toggleSideNav]);

  const handleShowSideNavClick = (e) => {
    console.log(sideNavState.toggleSideNav);    // click1 = false, click2 = true
    dispatch(showSideNav()); 
    console.log(sideNavState.toggleSideNav);    // click1 = false, click2 = true
  }

  return (

    <div className="header_header">
      <div className="header_toggle-btn-container">
          <FontAwesomeIcon icon="search" className="header_search-icon header_font-awesome-icon" onClick={handleShowSideNavClick} />
      </div>

      <div className="header_toggle-and-title-container">

        <div className="header_logo-title-container">
          <FontAwesomeIcon data-testid="reddit-icon" icon={['fab', 'reddit']} className="header_reddit-icon header_font-awesome-icon" />

          <h1 className="header_title">Reddit<span className="header_title-span">Sample</span></h1>
        </div>
      </div>
      
      <div className="header_nav-container">
        <Nav />
      </div>

      <SideNav />
    </div>
  )
}

export default Header;

这是我截断的切片，sideNavSlice.js：

import { createSlice } from '@reduxjs/toolkit'; 

const sideNavSlice = createSlice({
  name: 'sideNav',
  initialState: {
    toggleSideNav: false,
  },
  reducers: {
    showSideNav: (state, action) => {
      console.log(state.toggleSideNav);    // click1 = false, click2 = true
      state.toggleSideNav = !state.toggleSideNav; 
      console.log(state.toggleSideNav);    // click1 = true, click2 = false
    },
  }
});

export const { showSideNav } = sideNavSlice.actions; 

export const selectShowSideNav = state => state.sideNav;
export default sideNavSlice.reducer; 

在 Header.js 中，我在 handleShowSideNavClick() 中调度操作并记录调度两侧的状态，但状态保持不变？我期望调度后第二个日志中的状态与第一个日志中的状态相反，以便我可以根据更改执行更改。

但是，在 Header.js 中的 useEffect() 中，状态更改是一个依赖项，因此它会按预期触发状态更改。第一次点击输出为真，第二次为假。

在 sideNavSlice.js 中，状态更改也按预期工作，因为状态更改两侧的两个输出日志显示输出 (false => true)，并且在第二次单击时相同 (true => false)。

Redux DevTools 还按预期显示状态变化。

先前的研究主要围绕状态的突变，但我不相信我正在改变状态，并且可以看出调度成功地改变了预期的状态，除了在我实际调用它的实际函数中。

标签： reactjsreact-reduxredux-toolkitredux-devtools