typescript redux 工具包 payloadaction 冗长错误

Question

import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"
import axios, { AxiosError} from "axios"


type user = {
    id: number,
    token: string
}

export type error = {
    error: string
}

interface authState {
    user: user | {},
    isFetching: boolean
    error?: error

}




export const authLogin = createAsyncThunk(
    'auth/login',
    async (credentials : { username: string, password: string}, { rejectWithValue}) => {
        try {
            const response = await axios.post("http://localhost:3001/auth/login", credentials)
            return response.data

        } catch (err : any) {
            const error : error = err.response.data || {error: "Server error"}
            return rejectWithValue(error)
        }
    }
)




const initialState: authState = {
    user: {},
    isFetching: true
}

export const authSlice = createSlice({
    name: "authReducer",
    initialState,
    reducers: {
        setUser: (state, action : PayloadAction<user>) => {
            state.user = action.payload
        }
    },
    extraReducers: (builder) => {

        // LOGIN
        builder.addCase(authLogin.pending, (state : authState) => {
            state.isFetching = true
        })
        builder.addCase(authLogin.fulfilled, (state: authState, action: PayloadAction<user>) => {
            const { id, token } = action.payload
            localStorage.setItem("messenger-token", token)
            state.user = action.payload
            state.user = {
                id: id,
                token: token
            }
            
        })
        /* errors here */
        builder.addCase(authLogin.rejected, (state : authState, action: PayloadAction<error>) => {
            state.error = action.payload
        })
    },
})

export const { setUser } = authSlice.actions

export default authSlice.reducer

错误被拒绝

(alias) type PayloadAction<P = void, T extends string = string, M = never, E = never> = {
    payload: P;
    type: T;
} & ([M] extends [never] ? {} : {
    meta: M;
}) & ([E] extends [never] ? {} : {
    error: E;
})



No overload matches this call.
  Overload 1 of 2, '(actionCreator: AsyncThunkRejectedActionCreator<{ username: string; password: string; }, {}>, reducer: CaseReducer<authState, PayloadAction<unknown, string, { arg: { ...; }; requestId: string; requestStatus: "rejected"; aborted: boolean; condition: boolean; } & ({ ...; } | ({ ...; } & {})), SerializedError>>):

这个错误我已经有一段时间了。

我不确定如何修复此错误。我正在返回一个错误类型，但 action: PayloadAction<error> 给出了这个错误。

我什至console.log' 并使其出错，并以错误类型的形式输出。怎么修？另外，在 authLogin thunk 中，我输入了 err: any 我不确定这是否会导致错误，但是我如何命名 err 而不会出错？

Answer 1

您只需指定拒绝值类型即可通过打字稿推断；

将类型添加到 createAsyncThunk:

export const authLogin = createAsyncThunk<
  user, // Returned type
  { username: string; password: string }, // Params
  {
    rejectValue: error // Error type
  }
>("auth/login",

您现在可以删除类型提示：

builder.addCase(authLogin.rejected, (state, action) => {
  state.error = action.payload
})

typescript redux 工具包 payloadaction 冗长错误

typescript redux toolkit payloadaction lengthy error

typescript

redux