reactjs - RTK 查询 POST 方法不改变数据

Question

我正在尝试使用 RTK 获取一些数据。 GET 方法工作正常。 POST 方法也有效，但不会改变数据。我也为自动重新获取添加了 provideTags 和 invalidateTags，但仍然无法成功。

这是我的商店

import { configureStore } from "@reduxjs/toolkit"; 
import { verdeApiSlice } from "../features/verde/verde-slice"; 

export const store = configureStore({ 
  reducer: {
    [verdeApiSlice.reducerPath]: verdeApiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware().concat(verdeApiSlice.middleware);
  },
});

export const AppDispatch = store.dispatch;
export const RootState = store.getState;

这是切片

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export const verdeApiSlice = createApi({
  reducerPath: "verdeApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  tagTypes: ["Post"],
  endpoints(builder) {
    return {
      getPosts: builder.query({
        query: () => "/posts",
        providesTags: ["Post"],
      }),
      addPost: builder.mutation({
        query: (post) => ({
          url: `/posts`,
          method: "POST",
          body: post,
        }),
        invalidatesTags: ["Post"],
      }),
    };
  },
});

export const {
  useGetPostsQuery,
  useAddPostMutation,
} = verdeApiSlice;


export default verdeSlice.reducer;

这就是我调用 addPost 方法的方式

 const [addPost, { isLoading }] = useAddPostMutation();

 const handleClick = async (e) => {
    e.preventDefault();

    try {
      await addPost(post).unwrap();
      setPost(initialValue);
    } catch (error) {
      console.log("error", error);
    }
  };

Answer 1

如果你真的在使用https://jsonplaceholder.typicode.com ，这很正常。那些公共(public)模拟 api 接受 POST 请求，但它们总是返回静态数据——它们实际上永远不会发生变化。