react/redux app - TypeError: Cannot read property 'user' of undefined

Question

I am creating a react app, when getting data from redux. I am facing the below error message in browser. please check and let me know what am I missing.

I am using create-react-app redux-toolkit setup template to create the app

Here is my app.js:

import React from "react";
import { useSelector } from "react-redux";
import "./App.css";
import { selectUser } from "./features/userSlice";
import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
import Feed from "./components/Feed";
import Login from "./components/Login";

function App() {
    const user = useSelector(selectUser);
    
    return (
        <div className="App">
            <Header />
            { !user ? (
                <Login />
            ) : (
                <div className="main_content">
                    <Sidebar />
                    <Feed />
                </div>
            )}
        </div>
    );
}

export default App;

below you can find the redux reducer and actions

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      state.value = action.payload
    },
    logout: (state, action) => {
      state.user = null
    }
  },
});

export const { login, logout } = userSlice.actions;

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

export default userSlice.reducer;

below is the screenshot of error which. I'am getting when running the app

Are you using combineReducers, what is the code for your root reducer? — HMR, Mar 15 '21 at 13:59

score 2 · Accepted Answer · answered Mar 15 '21 at 14:34

Working example for you, be sure you configured your store correctly. You should separate this into responding files.

import React from "react";
import { combineReducers, createStore, createSlice } from "@reduxjs/toolkit";
import { connect, Provider, useDispatch, useSelector } from "react-redux";

// your part
const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state, action) => {
      state.user = null;
    }
  }
});

const { login, logout } = userSlice.actions
const selectUser = (state) => state.user.user;

// what I added
const reducer = combineReducers({
  user: userSlice.reducer
});

const store = createStore(reducer);

const Main = (props) => {
  const dispatch = useDispatch() // I used this to check if reducers work
  const user = useSelector( selectUser )

  return (
    <div onClick={ () => { dispatch(login({name: "Adam"})) }}>
        { !user ? "LOGIN" : "DASHBOARD "}
    </div>
  )
}

const mapStateToProps = (state) => ({
  user: state.user
});

const Container = connect(mapStateToProps, { login, logout })(Main);

function App() {
  return (
    <Provider store={store}>
      <Container/>
    </Provider>
  );
}

export default App;

react/redux app - TypeError: Cannot read property 'user' of undefined

1 Answers1