redux-toolkit处理异步函数createAsyncThunk

最新推荐文章于 2025-07-07 14:55:22 发布

万事胜意sy

最新推荐文章于 2025-07-07 14:55:22 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_50736511/article/details/129012275

笔记专栏收录该内容

469 篇文章

订阅专栏

文章展示了如何利用ReduxToolkit的createAsyncThunk创建异步操作，如获取和创建POST数据，通过axios与API交互，然后在Reduxstore中通过extraReducers处理fulfilled和rejected状态，更新state。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明函数，
它接受一个字符串标识符和一个payload创建者回调，执行实际的异步逻辑，并返回一个Promise，该Promise将根据你返回的Promise处理相关动作的调度，以及你的reducers中可以处理的action类型。

import axios from "axios";
import { createAsyncThunk } from "@reduxjs/toolkit";
export const GetPosts = createAsyncThunk(
"post/getPosts", async () => await axios.get(`${BASE_URL}/posts`)
);
export const CreatePost = createAsyncThunk(
"post/createPost",async (post) => await axios.post(`${BASE_URL}/post`, post)
);

在切片中处理

import { createSlice } from "@reduxjs/toolkit";
import { GetPosts, CreatePost } from "../../services";
export const initialState = {
  posts: [],
  loading: false,
  error: null,
};
export const postSlice = createSlice({
name: "post",
initialState: initialState,
extraReducers: {
   [GetPosts.fulfilled]: (state, action) => {
     state.posts = action.payload.data;
   },
   [GetPosts.rejected]: (state, action) => {
    state.posts = [];
   },
   [CreatePost.fulfilled]: (state, action) => {
   state.posts.unshift(action.payload.data);
   },
 },
});
export default postSlice.reducer;