如何将RTK Query请求返回的数据存入Redux store/slice中？

首先明确一个核心认知：RTK Query 本身已经将所有请求/缓存数据存储在 Redux Store 中，完全不需要你手动额外存储一份配置数据。你提到的两种方案都不是最优解，具体原因和实现方式如下：

为什么不需要手动存状态到 Store #

• 你调用对应配置接口的useQuery钩子时，第一次请求成功后数据会默认存入 RTK Query 内置的缓存节点，后续所有组件调用同一个useQuery接口都会直接读取缓存，不会触发重复请求，性能不受影响。
• 缓存数据是全局共享的，任意位置更新缓存后，所有依赖该数据的组件都会自动同步最新值，天然满足跨页面、跨组件共享的需求。

针对修改配置需求的实现方案 #

你只需要在定义 RTK Query 的 API Slice 时，补充配置更新的 Mutation，配合标签失效机制或者手动更新缓存即可，不需要自己维护组件状态：

1. 基础 API Slice 定义示例 #

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

export const configApi = createApi({
  reducerPath: 'configApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/你的接口前缀' }),
  tagTypes: ['GlobalConfig'], // 声明标签类型，用于缓存关联
  endpoints: (builder) => ({
    // 获取全局配置的查询接口
    getGlobalConfig: builder.query({
      query: () => '/config',
      providesTags: ['GlobalConfig'], // 标记该查询返回的数据属于 GlobalConfig 标签
    }),
    // 更新全局配置的 Mutation 接口
    updateGlobalConfig: builder.mutation({
      query: (modifiedConfig) => ({
        url: '/config',
        method: 'PUT',
        body: modifiedConfig,
      }),
      // 标记更新成功后失效 GlobalConfig 标签对应的缓存，自动触发重新拉取最新配置
      invalidatesTags: ['GlobalConfig'],
    }),
  }),
})

// 导出自动生成的钩子
export const { useGetGlobalConfigQuery, useUpdateGlobalConfigMutation } = configApi

2. 组件内使用方式 #

• 任意需要读配置的组件，直接调用查询钩子即可：

  const { data: globalConfig, isLoading } = useGetGlobalConfigQuery()
  

• 需要修改配置的组件，调用 Mutation 钩子触发更新即可，所有用到配置的组件会自动同步最新值：

  const [updateConfig, { isLoading: isUpdating }] = useUpdateGlobalConfigMutation()
  
  const handleSaveConfig = (newConfig) => {
    updateConfig(newConfig)
  }
  

3. 可选优化：无需重新拉取的即时缓存更新 #

如果不想更新后重新发请求拉取配置，可以直接用updateQueryData手动更新缓存，替换上面的invalidatesTags配置即可：

updateGlobalConfig: builder.mutation({
  query: (modifiedConfig) => ({
    url: '/config',
    method: 'PUT',
    body: modifiedConfig,
  }),
  async onQueryStarted(modifiedConfig, { dispatch, queryFulfilled }) {
    // 等待更新接口请求成功
    const { data: latestConfig } = await queryFulfilled
    // 手动更新缓存里的配置数据
    dispatch(
      configApi.util.updateQueryData('getGlobalConfig', undefined, (draft) => {
        Object.assign(draft, latestConfig)
      })
    )
  },
})

原方案的问题说明 #

• 第一种手动useQuery拿结果再dispatch存 Store 的方案属于状态重复存储，后期很容易出现 RTK Query 缓存和你手动存的状态不一致的问题，维护成本极高，完全没必要。
• 第二种用组件状态管理全局配置修改的方案，需要自己处理多组件状态同步、跨页面传值等问题，直接用 RTK Query 自带的全局缓存能力即可解决。

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