Uncaught TypeError: Cannot read properties of undefined (reading 'user')

Question

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;

Error: userSlice.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'user') at selectUser (userSlice.js:22:1)

Answer 1

export const selectUser = (state) => state.user === null ? '' : state.user.user;
// or
export const selectUser = (state) => state.user === null ? {} : state.user.user;

Answer 2

you need to use configureStore and use useSelector to get the user

step1 :

you can create new file named store or any name you want

import { configureStore } from "@reduxjs/toolkit";
import User from "./slices/userSlice";

const store = configureStore({
 reducer: {
  User: User,
 },
});

export default store;

step2 :

you need to add the provider in the index.js like this:

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

step3 :

use useSelector to get the user from any place like this :

const user = useSelector((state) => state.User.user); 
console.log(user);

Answer 3

Try declaring the initial state outside the createSlice function

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;

Or simple just put an object in the place of initialState,

so something like

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;