typescript 在extraReducers中添加action.payload的类型- Redux Toolkit

rkue9o1l  于 2023-04-13  发布在  TypeScript
关注(0)|答案(1)|浏览(129)

我尝试使用Redux Toolkit和TypeScript实现身份验证。首先,我使用createAsyncThunk创建了signUp,如下所示。

const signUp = createAsyncThunk<
    string | null,
    {
        name: string;
        email: string;
        password: string;
        avatar: string;
    }
>(
    "user/signup",
    async ({ name, email, password, avatar }, { rejectWithValue }) => {
        try {
            const config = {
                headers: {
                    "Content-Type": "application/json",
                },
            };

            await axios.post(
                `${backendURL}/api/user/register`,
                { name, email, password, avatar },
                config
            );

            return null;
        } catch (error: any) {
            if (error.response && error.response.data.message) {
                return rejectWithValue(error.response.data.message);
            } else {
                return rejectWithValue(error.message);
            }
        }
    }
);
const signIn = createAsyncThunk<void, { email: string; password: string }, {}>(
    "user/signin",
    async ({ email, password }, { rejectWithValue }) => {
        try {
            const config = {
                headers: {
                    "Content-Type": "application/json",
                },
            };

            const { data } = await axios.post(
                `${backendURL}/api/user/signin`,
                { email, password },
                config
            );

            localStorage.setItem("userToken", data.userToken);

            return data;
        } catch (error: any) {
            if (error.response && error.response.data.message) {
                return rejectWithValue(error.response.data.message);
            } else {
                return rejectWithValue(error.message);
            }
        }
    }
);

然后是减速器

const initialState: {
    userToken: string | null;
    loading: boolean;
    userInfo: { userId: string; email: string } | null;
    error: string | null;
    success: boolean;
} = {
    userToken,
    loading: false,
    userInfo: null,
    error: null,
    success: false,
};

const authSlice = createSlice({
    name: "authen",
    initialState,
    reducers: {
        logout: (state) => {
            localStorage.removeItem("userToken");
            state.loading = false;
            state.userInfo = null;
            state.userToken = null;
            state.error = null;
        },
        setCredentials: (state, { payload }) => {
            state.userInfo = payload;
        },
    },
    extraReducers: (builder) => {
        builder
            .addCase(signUp.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
            .addCase(signUp.fulfilled, (state) => {
                state.loading = false;
                state.success = true;
            })
            .addCase(signUp.rejected, (state, action) => {
                state.loading = false;
                state.error = action.payload;
            })
            .addCase(signIn.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
            .addCase(signIn.rejected, (state, { payload }) => {
                state.loading = false;
                state.error = payload;
            })
            .addCase(signIn.fulfilled, (state, { payload }) => {
                state.loading = false;
                state.userInfo = payload;
                state.userToken = payload.userToken;
            });
    },
});

因为我没有指定任何类型的行动,所以一个错误消息显示,当我试图分配行动。有效载荷到状态。用户信息,但我不知道如何做到这一点。请帮助我。
我到处找了,但没有找到答案

yhuiod9q

yhuiod9q1#

您不需要提供该类型-它将从您传入的createAsyncThunk示例中推断出来-在signUpstring | null的情况下。
也许你没有为signIn输入正确的内容?

相关问题