有没有办法使用 createAsyncThunk 到 axios.put 使用 reduxtoolkit？

Question

有人可以指导我了解如何使用 reduxtoolkit 发出 axios.put 请求吗？

这是我的项目切片文件。 voteProject 是我遇到问题的地方。我现在只是尝试硬编码数据来让它工作。当我运行它没有箭头函数时它不接受数据并抛出一个错误说当我运行它作为箭头函数时它接受投影数据但不将 axios.put 发送到数据库。任何帮助将不胜感激。

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from '../axios';
import data from './data'

export const getProjects = createAsyncThunk(
    "projects/getProjects",
    async () => {
        const response = await axios.get('/api/v1/works')
        return response.data.data
    }
)

export const voteProject = (project) => createAsyncThunk(
    "projects/voteProject",
    async () => {
        const response = await axios.put("/api/v1/works/61fe5ee76b924c82c53b7513", {upvote: [1,2]})
        console.log("response: _____________________", response)
    }
)

// change the state based on the called functio
export const projectsSlice = createSlice({
    name: 'projects',
    initialState: {
        projects: null,
        status: null,
    },
    reducers: {
        setUpvote: (state, action) => {
            const index = state.projects.findIndex((obj) => obj._id === action.payload.id);
            // console.log("Payload: ", action.payload)
            // console.log("Index: ", action.payload)
            if (action.payload.isDownvote === false) {
                return state.projects[index].upvote += 1;
            } else if (action.payload.isDownvote === true) {
                state.projects[index].upvote += 1;
                state.projects[index].downvote -= 1;
            }

        },
        setDownvote: (state, action) => {
            const index = state.projects.findIndex((obj) => obj._id === action.payload.id);
            if (action.payload.isUpvote === false) {
                state.projects[index].downvote += 1;
            } else if (action.payload.isUpvote === true) {
                state.projects[index].downvote += 1;
                state.projects[index].upvote -= 1;
            }
        },
        setSubractVote: (state, action) => {
            const index = state.projects.findIndex((obj) => obj._id === action.payload.id);
            if (action.payload.voteType === "upvote") {
                state.projects[index].upvote -= 1;
            } else if (action.payload.voteType === "downvote") {
                state.projects[index].downvote -= 1;
            }
        },
    },
    extraReducers: builder => {
        builder
            .addCase(getProjects.pending, (state, action) => {
                state.status = 'loading';
            })
            .addCase(getProjects.fulfilled, (state, action) => {
                state.status = 'success';
                state.projects = action.payload;
            })
            .addCase(getProjects.failed, (state, action) => {
                state.status = "failed";
            })
    }
})

//action creators are generated for each case reducer function
export const { setUpvote, setDownvote, setSubractVote } = projectsSlice.actions;

export default projectsSlice.reducer;

Answer 1

将您的 thunk 函数编辑为

export const voteProject = createAsyncThunk(
  'projects/voteProject',
  async (data) => {
    try {
      const response = await axios.put("/api/v1/works/61fe5ee76b924c82c53b7513", data)
      return response.data
    } catch (err) {
      // custom error
    }
  }
)

export const projectsSlice = createSlice({
  name: 'projects',
  initialState: {
    projects: null,
    status: null,
  },
  extraReducers: (builder) => {
    builder.addCase(voteProject.fulfilled, (state, { payload }) => {
      // payload is the data response from thunk above
      // update your state
    })
    // add more case
  }
})

在你的组件中：

import { voteProject } from './your-slice'
import { useAppDispatch } from '../store'

const dispatch = useAppDispatch()
const onVoting = () => {
  dispatch(voteProject({ // your data }))
    .unwrap()
    .then((originalPromiseResult) => {
      // handle result here
    })
    .catch((rejectedValueOrSerializedError) => {
      // handle error here
    })
}

由于Redux Toolkit v1.6 集成了RTK Query，所以可以使用rtk-query写日期抓取

有没有办法使用 createAsyncThunk 到 axios.put 使用 reduxtoolkit？

Is there a way to use createAsyncThunk to axios.put using reduxtoolkit?

javascript

axios

redux-toolkit