当代码几乎相似时,尝试导出一个切片中的状态而不是另一个切片中的状态时,Redux选择器出错

sshcrbum  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(127)

我是redux的新手,我创建了一个名为eventmodalSlice的切片,用来跟踪应用程序中的模态是打开还是关闭的。

类型错误:undefined不是对象(评估'state. eventmodal')

import React from "react"
import { createSlice } from "@reduxjs/toolkit"

export const eventmodalSlice = createSlice({
    name: "eventmodal",
    initialState:{
        modalvisible: null
    },

    reducers: {
        Close: (state, action) => {
            state.modalvisible = action.payload;
        },

        Open: (state, action) => {
            state.modalvisible = action.payload;
        },

    }
});

export const  {Close, Open} = eventmodalSlice.actions;
export const selectEventModal = (state) => state.eventmodal.modalvisible;
export default eventmodalSlice.reducer;

我不确定是什么原因导致了这个特定的切片中的错误,因为我有另一个切片称为用户切片,它看起来几乎与这个切片相同。

import React from "react"
import { createSlice } from "@reduxjs/toolkit"
import { act } from "react-test-renderer";

export const userSlice = createSlice({
    name: "user",
    initialState:{
        user: null
    },

    reducers: {
        Signin: (state, action) => {
            state.user = action.payload;
        },

        Register: (state, action) => {
            state.user = action.payload;
        },

        Signout: (state) => {
            state.user = null;
        }
    }
});

export const  { Signin, Register, Signout} = userSlice.actions;

export const selectUser = (state) => state.user.user;

export default userSlice.reducer;

State.user.user在最后一个代码段中没有错误。这是最令人困惑的地方,因为这些代码段看起来几乎一样,除非我遗漏了什么。如果有任何帮助,我们将不胜感激。

我的商店看起来像这样

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice"
import eventmodalReducer from "./eventmodalSlice"

export default configureStore({
    reducer: {
        user: userReducer,
        eventmodal: eventmodalReducer
    },
});
daupos2t

daupos2t1#

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice"
import eventmodalReducer from "./eventmodalSlice"

const store = configureStore({
    reducer: {
        user: userSlice.reducer,
        eventmodal: eventmodalReducer
    },
});
export default store;
mccptt67

mccptt672#

import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './app/store';

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

);
reportWebVitals();

相关问题