使用RTK查询更改状态

Question

我正在学习RTK查询，真的很困惑。如果有人能给我指明正确的方向，我会很高兴的。我的问题是如何操作应用程序的状态，就像使用createAsyncThunk和设置extraReducers时一样。

export const asyncApiCall = createAsyncThunk("api/get_data", async (data) => {
    
    const config = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
   
    };
    
    const res = await axios.get( "http://apiserver/path_to_api",data,config );
    return res['data']
} )

export const mySlice  = createSlice({
    name:"mySliceName",
    initialState:{
        data: [],
        loadInProgress: false,
        loadError: null,
        extraData: {
           // something derived based on data received from the api 
        }

    },

    extraReducers: {
        [asyncApiCall .pending]: (state) => {
            state.loadInProgress = true;
    
        },
        [asyncApiCall .fulfilled]: (state,action) => {
            
            state.loadInProgress = false;
            state.data = action.payload;

            state.extraData = someUtilFunc(state.data)
           
        },
        [asyncApiCall.rejected]: (state) => {
            state.loadInProgress = false;
            state.loadError= true;
        },
       
    }
 })

现在我要用RTK查询代替它。我目前的理解是，RTK查询会自动生成钩子，用于公开从api接收的数据和所有与查询相关的信息，比如是否挂起、是否发生错误等等。

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


export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: builder => ({
    getData: builder.query({
      query: () => '/get_data'
    }),

    setData: builder.mutation({
        query: info => ({
          url: '/set_data',
          method: 'POST',
          body: info 
        })
      })

  })
})

export const { useSendDataMutation, useGetDataQuery } = apiSlice 

如果我想存储一些可能受到api调用影响的额外数据，我应该创建另一个将以某种方式与apiSlice交互的片段，还是可以将所有内容合并到这个现有代码中？我很抱歉这个问题可能很幼稚。

Answer 1

简而言之，RTK查询只关注从服务器获取的纯缓存数据。因此，默认情况下，它会在API调用响应中准确地存储返回的内容，仅此而已。

有一些注意事项:您可以使用transformResponse修改返回的数据，并在数据存储到缓存片之前重新排列数据，还可以使用updateQueryData手动修改应用程序其他部分的缓存数据。

另外要注意的是，RTK查询构建在标准Redux模式之上:块和分派操作。每次API调用返回时，都会分派包含数据的fulfilled操作。这意味着您还可以应用另一个建议的Redux模式:在其他还原器中侦听该操作，并根据相同的操作更新多个状态片段。

所以，你有三个主要的选择：

如果“额外数据”完全来自服务器响应值，则可以使用{originalData, derivedData}

• You并返回类似于的东西，可以像往常一样将原始数据保存在缓存中，但是如果需要更新额外值，则可以使用回传选择器函数来派生额外的值，如果需要更新额外的值，则可能值得在另一个片中侦听满足的查询操作，并对其执行一些操作，例如：：

import { api } from "./api";

const someExtraDataSlice = createSlice({
  name: "extraData",
  initialState,
  reducers: {/* some reducers here maybe? */},
  extraReducers: (builder) => {
    builder.addMatcher(api.endpoints.getPokemon.matchFulfilled, (state, action) => {
      // pretend this field and this payload data exist for sake of example
      state.lastPokemonReceived = action.payload.name;
    }
  }
})