Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') redux reactjs

Question

Getting the following error while dispatching authenticating users from firebase and firestore. I'm using redux toolkit, I'm registering user with authentication with firestore and after that getting the user information to store in the redux and therefore dispatching the action to send user information. In the firebase I can see the user is register but can't able to see in redux for the payload and getting this error.

Error ScreenShort

store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/counter/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

userSlice.js

import { createSlice } from '@reduxjs/toolkit';
// import { fetchCount } from './counterAPI';

const initialState = {
  user: null,
};


export const userSlice = createSlice({
  name: 'user',
  initialState,


  reducers: {

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

    logout: (state) => {
      return state.user = null;
    },

  },

});

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

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


export default userSlice.reducer;

Login.js

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { auth } from './firebase';
import './Login.css'
import login from './features/counter/userSlice'





function Login() {

    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [pic, setPic] = useState("")


    const dispatch = useDispatch();

    const register = () => {

        if (!name) {
            return alert('Please enter a full name')
        }

        auth.createUserWithEmailAndPassword(email, password)
            .then((userAuth) => {
                userAuth.user
                    .updateProfile({
                        displayName: name,
                        photoURL: pic,
                    })
                    .then(() => {
                        dispatch(login({
                            email: userAuth.user.email,
                            uid: userAuth.user.uid,
                            displayName: name,
                            photoUrl: pic,
                        })
                        );
                    });
            })
            .catch((error) => alert(error));
    }



    const loginToApp = (e) => {
        e.preventDefault();


    }



    return (
        <div className='login'>

            <h2>You are not logedin</h2>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTv5NTn4Iw_QsC7kW0Lbw3LrlPcPAHso2l9A&usqp=CAU" alt='logo' />
            <form>
                <input placeholder='Full name (Required if registering)' type="text" value={name} onChange={e => setName(e.target.value)} />
                <input placeholder='Profile pic (Optional)' type="text" value={pic} onChange={e => setPic(e.target.value)} />
                <input placeholder='Email (Required if registering)' type="email" value={email} onChange={e => setEmail(e.target.value)} />
                <input placeholder='Password (Required if registering)' type="password" autoComplete='off' value={password} onChange={e => setPassword(e.target.value)} />
                <button onClick={loginToApp}>Sign In</button>

            </form>
            <p>Not a member?{" "}
                <span className='login__register' onClick={register}>Register Now</span>

            </p>


        </div>
    );
}

export default Login;

Answer 1

I encountered this error today and it's due to the wrong importation of Login action in Login.js file.Change

import login from './features/counter/userSlice'

to

import { login } from './features/counter/userSlice'