如何运行对减速器进行异步调用？

Question

import { createSlice, PayloadAction } from "@reduxjs/toolkit"
import { Dispatch } from 'redux';
import axios from "axios"
const API_URL = process.env.REACT_APP_API_HOST_URL || ""

export type projectObj = {
    id?: number
    createdBy?: number,
    title: string,
    description: string,
    endDate: string,
    priority: 'Critical' | 'High' | 'Medium' | 'Low',
    status: 'Not Active' | 'In Progress' | 'Completed',
    progress: number,
    favorite: boolean


}

interface projectState {
    projects: projectObj[],
    projectFetching: boolean
}

const initialState : projectState = {
    projects : [],
    projectFetching: false

}


export const projectSlice = createSlice({
    name: 'projectReducer',
    initialState,
    reducers: {
        /* errors here */
        create: async (state, action : PayloadAction<projectObj>) => {
            const projectObj = action.payload
            state.projects.push(await createProject(projectObj))
        }
    },

})

// CREATE PROJECT

const createProject = async (projectObj : projectObj)  : Promise<projectObj> => {
    try {
        const project : projectObj = await axios.post(`${API_URL}/api/projects`, projectObj)
        return project
    } catch (err : any) {
        return projectObj
    }
}

export const { create } = projectSlice.actions

export default projectSlice.reducer

Create 使用上面的 props 列表接收一个 projectObj，我的 api 将创建一个新项目，然后 return 带有 id 的项目对象。我想把它推到我的州。

create 操作中出现此错误。函数 createProject return 是我需要等待的承诺。 .解决这个问题的正确方法是什么？

编辑以询问有关答案的问题-

export const projectSlice = createSlice({
    name: 'projectReducer',
    initialState,
    reducers: {
        create: (state, action: PayloadAction<projectObj>) => {
            const projectObj = action.payload
            state.projects.push(projectObj)
        }
    },
})  


export const createProject = (projectObj: projectObj) => async (dispatch: Dispatch) => {
    try {
        const response = await axios.post(`${API_URL}/api/projects`, projectObj)
        const data: projectObj = response.data.project
        dispatch(create(data))
    } catch (err: any) {
        console.log(err)
    }
}

Answer 1

使用 createAsyncThunk.

处理异步请求

const createProjectThunk = createAsyncThunk(
  "project/createNew",
  async (projectObj: projectObj) => {
    const response = await createProject(projectObj);
    return response;
  }
);

export const projectSlice = createSlice({
  name: "projectReducer",
  initialState,
  reducers: {
    /* errors here */
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(createProjectThunk.fulfilled, (state, action) => {
      // Add user to the state array
      state.projects.push(action.payload);
    });
  }
});

如何运行对减速器进行异步调用？

How to run async call on a reducer?

reactjs

redux

redux-toolkit

如何 运行 对减速器进行异步调用？

How to run async call on a reducer?

reactjs

redux

redux-toolkit

如何运行对减速器进行异步调用？