title: dispatch not working in function it's triggered in
body: <p>I am using react-redux with redux toolkit in my app, and I'm dispatching a change of state (boolean) to the opposite of its existing state each time I trigger the event.</p>
  <p>The state successfully changes each time in Redux DevTools and also in a separate useEffect() function in the same component, but not working as expected in the function it's actually dispatched in, which is where I plan to make some necessary changes to my UI based on that state change.</p>
  <p>Here is a truncated version of the component I trigger the dispatch in, Header.js:</p>
  <pre><code>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 = () =&gt; {
    const sideNavState = useSelector(selectShowSideNav)
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      sideNavState.toggleSideNav ? console.log(true) : console.log(false);   // click1 = true, click2 = false
    }, [sideNavState.toggleSideNav]);
  
    const handleShowSideNavClick = (e) =&gt; {
      console.log(sideNavState.toggleSideNav);    // click1 = false, click2 = true
      dispatch(showSideNav()); 
      console.log(sideNavState.toggleSideNav);    // click1 = false, click2 = true
    }
  
    return (
  
      &lt;div className=&quot;header_header&quot;&gt;
        &lt;div className=&quot;header_toggle-btn-container&quot;&gt;
            &lt;FontAwesomeIcon icon=&quot;search&quot; className=&quot;header_search-icon header_font-awesome-icon&quot; onClick={handleShowSideNavClick} /&gt;
        &lt;/div&gt;
  
        &lt;div className=&quot;header_toggle-and-title-container&quot;&gt;
  
          &lt;div className=&quot;header_logo-title-container&quot;&gt;
            &lt;FontAwesomeIcon data-testid=&quot;reddit-icon&quot; icon={['fab', 'reddit']} className=&quot;header_reddit-icon header_font-awesome-icon&quot; /&gt;
  
            &lt;h1 className=&quot;header_title&quot;&gt;Reddit&lt;span className=&quot;header_title-span&quot;&gt;Sample&lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div className=&quot;header_nav-container&quot;&gt;
          &lt;Nav /&gt;
        &lt;/div&gt;
  
        &lt;SideNav /&gt;
      &lt;/div&gt;
    )
  }
  
  export default Header;
  </code></pre>
  <p>And here is my truncated slice, sideNavSlice.js:</p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit'; 
  
  const sideNavSlice = createSlice({
    name: 'sideNav',
    initialState: {
      toggleSideNav: false,
    },
    reducers: {
      showSideNav: (state, action) =&gt; {
        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 =&gt; state.sideNav;
  export default sideNavSlice.reducer; 
  </code></pre>
  <p>In Header.js I dispatch the action in handleShowSideNavClick() and log the state either side of the dispatch, but the state stays the same? I am expecting the state in the second log after the dispatch to be the opposite of what it is in the first log so that I can then execute changes based on the change.</p>
  <p>However, in the useEffect() in Header.js, the state change is a dependency, so it triggers on state change, as expected. On first click the output is true, and on the second false.</p>
  <p>In sideNavSlice.js the state change also works as expected, as the two output logs either side of the state change show the output (false =&gt; true), and the same on the second click (true =&gt; false).</p>
  <p>Redux DevTools also shows changes in state as expected.</p>
  <p>Prior research has mostly revolved around mutation of state, but I don't believe I'm mutating the state, and the dispatch can be seen to be successfully changing the state as expected, except in the actual function I actually call it in.</p>