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

Question

从 firebase 和 firestore 发送身份验证用户时出现以下错误。 我正在使用 redux 工具包，我正在使用 Firestore 进行身份验证注册用户，然后将用户信息存储在 redux 中，因此发送操作以发送用户信息。 在 firebase 中，我可以看到用户正在注册，但无法在 redux 中看到有效负载并出现此错误。

错误截图

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;

登录.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

我今天遇到了这个错误，这是由于在Login.js文件中输入了错误的登录操作。更改

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

至

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