在react-redux上运行，我的状态isCartVisible显示为undefined，我使用了简单的函数组件，并将我的存储存储在不同的文件中。

//main index.js file
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';    
import './index.css';
import App from './App';
import store from './redux-store/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);

和

//App.js

import {  useSelector } from "react-redux";
import Layout from "./components/Layout/Layout";
import Cart from "./components/Cart/Cart";

function App() {
    const cartVisible = useSelector((state) => state.isCartVisible);

    return (
        <Layout>
            {cartVisible && <Cart />}
        </Layout>
    );
}

以及应用程序内部某个位置的组件，通过单击按钮我想切换<Cart>组件

//CartButton.js
import { useDispatch } from "react-redux";

const CartButton = () => {
    const dispatch = useDispatch();

    const cartShowHandler = () => {
        dispatch({ type: "cartToggle" });       
    };

    return (
        <button onClick={cartShowHandler}>
            Click
        </button>
    );
};

这是我的存储文件，在这里我用reducer创建了存储

import { createStore } from "redux";

const uiReducer = (state = { isCartVisible: true }, action) => {
    if (action.type === "cartToggle") {
        state.isCartVisible = !state.isCartVisible;
    }
    return state;
};

const uiStore = createStore(uiReducer);

export default uiStore;