如何在Redux Toolkit createAPI中保存mutation结果供后续使用？

首先纠正你代码里的关键错误：POST属于修改服务器资源的操作，RTK Query中这类操作应该用builder.mutation而非builder.query（query仅用于GET类查询请求），修正后的基础代码如下：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const createResource = createApi({
  reducerPath: 'someReducerPath',
  baseQuery: fetchBaseQuery({ baseUrl: window.API_URL }),
  endpoints: (builder) => ({
    postResource: builder.mutation({
      query: (postBody) => ({
        url: 'someURL',
        method: 'POST',
        body: postBody
      }),
      transformResponse: (response) => response
    }),
  }),
});

export const { usePostResourceMutation } = createResource;

针对复用mutation结果的需求，有三种可行方案：

方案一：用RTK Query自带Selector获取缓存结果 #

RTK Query会自动缓存mutation的执行结果，你可以通过生成的endpoint selector，传入原payload直接从Redux Store中取出对应结果：

import { useSelector } from 'react-redux';
import { createResource } from './path-to-your-api-file';

function TargetComponent() {
  // 传入和之前调用mutation完全一致的payload
  const mutationResult = useSelector(
    createResource.endpoints.postResource.select(yourPreviousPayload)
  );

  if (mutationResult.isSuccess) {
    return <div>复用创建结果：{JSON.stringify(mutationResult.data)}</div>;
  }
  return <div>暂无可用结果</div>;
}

方案二：用useMutationState获取最近的mutation结果 #

如果不想依赖原payload，想直接获取最近一次成功执行的postResource mutation结果，可以用RTK Query提供的useMutationState钩子：

import { useMutationState } from '@reduxjs/toolkit/query/react';
import { createResource } from './path-to-your-api-file';

function TargetComponent() {
  // 筛选出最近一次成功完成的postResource mutation
  const [latestSuccessMutation] = useMutationState({
    endpoint: 'postResource',
    select: (states) => states
      .filter(state => state.status === 'fulfilled')
      .sort((a, b) => b.fulfilledTimeStamp - a.fulfilledTimeStamp)
      .slice(0, 1)
  });

  if (latestSuccessMutation) {
    return <div>最近创建结果：{JSON.stringify(latestSuccessMutation.data)}</div>;
  }
  return <div>暂无可用结果</div>;
}

方案三：将结果存入自定义Redux Slice #

如果需要全局无限制复用结果，且不想受RTK Query缓存规则约束，可以在mutation的onSuccess回调中将结果存入自定义slice：

1. 创建存储结果的slice：

import { createSlice } from '@reduxjs/toolkit';

const createdResourceSlice = createSlice({
  name: 'createdResource',
  initialState: { data: null },
  reducers: {
    saveCreatedResource: (state, action) => {
      state.data = action.payload;
    }
  }
});

export const { saveCreatedResource } = createdResourceSlice.actions;
export default createdResourceSlice.reducer;

2. 修改RTK Query的mutation配置，添加onSuccess回调：

export const createResource = createApi({
  reducerPath: 'someReducerPath',
  baseQuery: fetchBaseQuery({ baseUrl: window.API_URL }),
  endpoints: (builder) => ({
    postResource: builder.mutation({
      query: (postBody) => ({
        url: 'someURL',
        method: 'POST',
        body: postBody
      }),
      transformResponse: (response) => response,
      // 成功后将结果存入自定义slice
      onSuccess: (response, _, { dispatch }) => {
        dispatch(saveCreatedResource(response));
      }
    }),
  }),
});

3. 在任意组件中通过useSelector获取结果：

import { useSelector } from 'react-redux';

function AnyComponent() {
  const createdResource = useSelector(state => state.createdResource.data);
  
  if (createdResource) {
    return <div>全局复用结果：{JSON.stringify(createdResource)}</div>;
  }
  return <div>暂无可用结果</div>;
}

内容的提问来源于stack exchange，提问作者koustubh