title: Redux State Does Not Get Updated In Dev Tools But Current State Is Being Reflected In Props
body: <p>I'm a redux noob who's trying to get his head around how redux works.
  so it's simple.</p>
  <p>I have a store</p>
  <p>I have a reducer which returns nothing but a single key/pair value
  <code>{authenticated:false}</code></p>
  <p>I have a useEffect funtion in a child component which just <code>console.log</code>'s the props value whenever the props change.</p>
  <p>The children component somehow logs the updated props whenever it changes but the changes does not reflect in the redux dev tools.</p>
  <p>Below is my code</p>
  <h1>index.js</h1>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import ReduxStore from &quot;./ReduxStore/store&quot;;
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Provider store={ReduxStore}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  </code></pre>
  <h1>App.js</h1>
  <pre><code>import { connect, useDispatch } from &quot;react-redux&quot;;
  const { React, useEffect } = require(&quot;react&quot;);
  const App = (props) =&gt; {
    const dispatch = useDispatch();
    useEffect(() =&gt; {
     //PS: i intentionally ignored the action dict inside the reducer
      dispatch({ type: &quot;AppReducer&quot;, payload: { type: &quot;checkUserToken&quot; } });
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    useEffect(() =&gt; {
      console.log(&quot;Props Changed &quot;, props);
  // This code above works because it returns the state returned from the reducer anytime it changes
    }, [props]);
    return &lt;&gt;hola &lt;/&gt;;
  };
  const matchStateToProps = (state) =&gt; ({ state });
  export default connect(matchStateToProps)(App);
  
  </code></pre>
  <h1>store.js</h1>
  <pre><code>const RootReducer = (state = {}, action) =&gt; {
    return {
      authenticated: false,
    };
    
  };
  
  const ReduxStore = createStore(RootReducer);
  ReduxStore.subscribe(() =&gt; console.log(&quot;State Is &quot;, ReduxStore.getState()));
  export default ReduxStore;
  
  </code></pre>