如何在其他组件中获取Redux RTK mutation返回的状态数据

方案1：使用RTK Query内置的端点选择器（最推荐） #

你不需要自己手动过滤整个api reducer的状态，每个mutation端点本身自带select方法，传入你调用mutation时的入参就能生成对应缓存条目的选择器，直接用useSelector获取即可。

示例代码：

1. 假设你的api slice定义如下：

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

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base' }),
  endpoints: (builder) => ({
    submitData: builder.mutation({
      query: (postData) => ({
        url: '/submit',
        method: 'POST',
        body: postData
      }),
      // 可选：延长缓存保留时间，避免无组件订阅时缓存被自动清理，单位为秒
      keepUnusedDataFor: 86400
    })
  })
})

// 自动生成的调用mutation的钩子
export const { useSubmitDataMutation } = api

2. 独立组件中获取对应mutation状态：

import { useSelector } from 'react-redux'
import { api } from './your-api-slice-path'

function IndependentComponent() {
  // select方法入参必须和你之前调用mutation时传入的参数完全匹配，才能命中对应缓存
  // 如果调用mutation时没有传参，此处传入undefined即可
  const submitMutationState = useSelector(api.endpoints.submitData.select(yourPostData))

  // 可直接拿到mutation的全量状态，和useMutation钩子返回的状态字段完全一致
  const { data, error, isLoading, isSuccess, isError } = submitMutationState

  // 后续业务逻辑直接使用上述字段即可
}

方案2：使用useMutationState钩子（RTK Query 1.9+版本支持） #

如果你无法拿到调用mutation时的入参，或者需要批量获取同一个mutation的所有调用记录，可以用官方提供的useMutationState钩子，不需要手动写选择器：

import { useMutationState } from '@reduxjs/toolkit/query/react'
import { api } from './your-api-slice-path'

function IndependentComponent() {
  // 获取所有submitData mutation的执行状态
  const allSubmitStates = useMutationState({
    of: api.endpoints.submitData,
    // 可选过滤器：仅保留执行成功的记录
    filter: (mutation) => mutation.status === 'fulfilled',
    // 可选映射：直接返回状态字段
    select: (mutation) => mutation.state
  })

  // 取最新的一条执行结果即可
  const latestSubmitResult = allSubmitStates.at(-1)
}

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