Redux 状态未在开发工具中更新，但当前状态正在反映在道具中

Question

我是一个 redux 菜鸟，想了解 redux 的工作原理。 所以很简单。

我有一家商店

我有一个 reducer，它只返回一个键/对值 {authenticated:false}

我在子组件中有一个 useEffect 函数，每当道具发生变化时，它只是 console.log 的道具值。

子组件以某种方式记录更新的道具，只要它发生更改，但更改不会反映在 redux 开发工具中。

下面是我的代码

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;

我该如何解决这个问题？ 提前致谢

Answer 1

我找到了问题的答案。

唯一缺少的代码行是添加

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 到 createStore 参数

代码应该是

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