import { createSlice } from '@reduxjs/toolkit';
export const userSlice = createSlice({
name: 'user',
initialState: {
user: null,
},
// The `reducers` field lets us define reducers and generate associated actions
reducers: {
login: (state, action) => {
state.user = action.payload;
},
logout: (state) => {
state.user = null;
},
},
});
export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;
錯誤：userSlice.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'user') at selectUser (userSlice.js:22:1)
uj5u.com熱心網友回復：
export const selectUser = (state) => state.user === null ? '' : state.user.user;
// or
export const selectUser = (state) => state.user === null ? {} : state.user.user;
uj5u.com熱心網友回復：
您需要使用configureStore并使用useSelector來獲取用戶
第 1 步：
您可以創建名為 store 的新檔案或您想要的任何名稱
import { configureStore } from "@reduxjs/toolkit";
import User from "./slices/userSlice";
const store = configureStore({
reducer: {
User: User,
},
});
export default store;
第2步：
您需要像這樣在 index.js 中添加提供程式：
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store/index";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
第三步：
使用useSelector從這樣的任何地方獲取用戶：
const user = useSelector((state) => state.User.user);
console.log(user);
uj5u.com熱心網友回復：
嘗試在 createSlice 函式之外宣告初始狀態
import { createSlice } from '@reduxjs/toolkit';
const initialState = { user: null }
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
login: (state, action) => {
state.user = action.payload;
},
logout: (state) => {
state.user = null;
},
},
});
export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;
或者簡單地把一個物件放在initialState的地方，
所以像
import { createSlice } from '@reduxjs/toolkit';
const initialState = { user: null }
export const userSlice = createSlice({
name: 'user',
//you put your initialState object here
{user : null},
reducers: {
login: (state, action) => {
state.user = action.payload;
},
logout: (state) => {
state.user = null;
},
},
});
export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/493260.html
標籤：javascript html css 反应 还原