title: How to await a useDispatch value in React?
body: <p>In my React codebase I've integrated Redux usign <code>react-redux</code> and I'm using the <code>useDispatch</code> hook to dispatch actions from my views. I just have one problem I don't have access to the updated values just after updating the store. Is there a way for me to wait for the state update to complete like <code>await</code> or something like a callback where I can execute the other code?</p>
  
  <p>This is how my code looks like:</p>
  
  <pre><code>import React from 'react';
  import { useDispatch } from "react-redux";
  import { setCore } from "../store/global";
  
  // the value from the store is drilled down as props
  export default function Home({ instance, core }) {
    const dispatch = useDispatch();
  
    const onConnect = async () =&gt; {
      // core may have some value before but I want to clear
      console.log(core); // prints the old value
      await dispatch(setCore(null));
      console.log(core); // Need to have null here
    }
  
    return (
      &lt;div&gt;
        &lt;button onClick={onConnect}&gt;Connect&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>