Redux State Not Updated In Dev Tools But Current State Is Being Reflected In Props

Question

I'm a redux noob who's trying to get his head around how redux works. so it's simple.

I have a store

I have a reducer which returns nothing but a single key/pair value {authenticated:false}

I have a useEffect funtion in a child component which just console.log 's the props value whenever the props change.

The children component somehow logs the updated props whenever it changes but the changes does not reflect in the redux dev tools.

Below is my code

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import ReduxStore from "./ReduxStore/store";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={ReduxStore}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js

import { connect, useDispatch } from "react-redux";
const { React, useEffect } = require("react");
const App = (props) => {
  const dispatch = useDispatch();
  useEffect(() => {
   //PS: i intentionally ignored the action dict inside the reducer
    dispatch({ type: "AppReducer", payload: { type: "checkUserToken" } });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    console.log("Props Changed ", props);
// This code above works because it returns the state returned from the reducer anytime it changes
  }, [props]);
  return <>hola </>;
};
const matchStateToProps = (state) => ({ state });
export default connect(matchStateToProps)(App);

store.js

const RootReducer = (state = {}, action) => {
  return {
    authenticated: false,
  };
  
};

const ReduxStore = createStore(RootReducer);
ReduxStore.subscribe(() => console.log("State Is ", ReduxStore.getState()));
export default ReduxStore;

How do i solve this? Thanks In Advance

Answer 1

I've found the answer to my question.

The only line of code missing was adding

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() to the createStore param

the code should have been

const ReduxStore = createStore(
  RootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);