React Redux：状态未定义

Question

使用react-redux，我的状态

isCartVisible

显示未定义，我使用了简单的功能组件，并将我的存储存储在不同的文件中。

//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>
    );
};

这是我的商店文件，我在其中使用减速器创建了我的商店

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;

Answer 1

你永远不应该改变状态。你在减速器中的情况应该是这样的并且它会起作用。

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

因为目前您的示例中只存储了一把密钥。你也可以这样做。

return { isCartVisible: !state.isCartVisible};

但是在您的减速器条件下返回整个状态始终是一个好习惯。

记住 redux 进行浅比较。这意味着它检查对象的引用是否更改。在你的情况下它没有改变。

有一次，我在博客文章中写了一些关于这个主题的内容https://dev.to/machy44/shallow-comparison-in-redux-3a6

Answer 2

在 Redux 中，你只能拥有一个 store。因此，您的

useSelector

调用实际上很可能会尝试从另一个存储中选择数据，而不是您在这里期望的数据。

您可以使用类似的方法来验证这一点

const fullState = useSelector(state => state)
console.log(fullState)

也就是说，您在这里还编写了一种已经过时多年的 Redux 风格 - 在现代 Redux 中，您不是在编写 switch..case 缩减器或字符串操作类型。此外，目前

createStore

已被弃用，取而代之的是

configureStore

。

我强烈推荐您阅读现代 Redux，然后按照官方 Redux 教程。

无论您现在关注的是什么资源，都可能让您对如何使用 Redux 有一个非常偏颇的看法。