类型“未知”不可分配给类型 WritableDraft&lt;{}&gt; | 可写草稿<user></user>

Question

我正在尝试在我的应用程序中使用 redux 工具包和 typescript 在我收到此错误之前一切似乎都工作正常。 这是我的 authSlice 的代码。 我试图通过身份验证创建用户仪表板，但无法通过 redux，因为编译器一直对我大喊大叫。

import { loadCurrentUser, CreateAccount, login, logout } from './auth.actions';
import { createSlice } from '@reduxjs/toolkit';
import { AuthState } from '../../../model/users-model';

let initialState = Object.freeze({
    isAuthenticated: false,
    error: '',
    status: 'idle',
    user: {},
}) as AuthState;

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        clearAuthError: (state) => {
            state.error = '';
        },
    },

    extraReducers: (builder) => {
        builder.addCase(loadCurrentUser.pending, (state) => {
            state.status = 'pending';
        });

        //handles auth/loadCurrentUser
        builder.addCase(loadCurrentUser.fulfilled, (state, { payload }) => {
            state.isAuthenticated = true;
            state.status = 'resolved';
            state.user = payload;
        });

        builder.addCase(loadCurrentUser.rejected, (state) => {
            state.isAuthenticated = false;
            state.status = 'rejected';
        });

        builder.addCase(CreateAccount.pending, (state) => {
            state.status = 'pending';
        });

        builder.addCase(CreateAccount.fulfilled, (state, { payload}) => {
            state.isAuthenticated = true;
            state.status = 'resolved';
            state.user = payload;
        });

        builder.addCase(CreateAccount.rejected, (state, { payload }) => {
            state.error = payload as string;
            state.isAuthenticated = false;
            state.status = 'rejected';
        });

        builder.addCase(login.pending, (state) => {
            state.status = 'pending';
        });

        builder.addCase(login.fulfilled, (state, { payload }) => {
            state.isAuthenticated = true;
            state.status = 'resolved';
            state.user = payload;
        });

        builder.addCase(login.rejected, (state, { payload }) => {
            state.error = payload as string;
            state.isAuthenticated = false;
            state.status = 'rejected';
        });

        builder.addCase(logout.pending, (state) => {
            state.status = 'pending';
        });

        builder.addCase(logout.fulfilled, (state) => {
            state.isAuthenticated = false;
            state.status = 'resolved';
            state.user = {};
        });

        builder.addCase(logout.rejected, (state) => {
            state.isAuthenticated = false;
            state.status = 'rejected';
            state.user = {};
        });
    },
});

//actions from createSlice
export const { clearAuthError } = authSlice.actions;

//the reducer

export default authSlice.reducer;

这是我的用户模型的代码

import { Action, ThunkAction } from '@reduxjs/toolkit';
import { store } from '../reduxStore/app';

export enum ROLE {
    STUDENT = 'Student',
    TEACHER = 'Teacher',
}

export interface CreateAccountData {
    name: string;
    email: string;
    password: string;
    role: ROLE;
}
export interface User {
    id?: string;
    name?: string;
    email: string;
    avatar?: string;
    password: string;
    role?: ROLE;
    profile?: Profile;
}

// export interface UserResponse {
//  user: User;
//  token: string;
// }

export interface LoginData {
    email: string;
    password: string;
}
export interface Profile {
    id: string;
    title: string;
    description: string;
    userId: string;
}

export interface CreateProfileData extends Omit<Profile, 'id' | 'userId'> {}

type Status = 'idle' | 'pending' | 'resolved' | 'rejected';
export interface AuthState {
    status: Status;
    isAuthenticated: boolean;
    error: string;
    user: {} | User;
}

export interface ErrorState {
    message: string | null;
}

export interface ProfileState {
    status: Status;
    user: User;
    error: string;
}

我是新的 typescript

Answer 1

试试这样写

builder.addCase(loadCurrentUser.fulfilled, (state, action: PayloadAction<{} | User>) => {
            state.isAuthenticated = true;
            state.status = 'resolved';
            state.user = payload;
        });

WritableDraft 来自 redux 工具包，它是 redux 工具包定义类型的一种方式