最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how can I access my store from RTK-Query endpoints? - Stack Overflow

programmeradmin0浏览0评论

I want to access to my redux-toolkit store data inside of the rtk-query endpoints.

how can I access my store from query or transformResponse methods?

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'
import { setUserInfo, setUserPermissions } from '../features/userSlice.js'
import { aesDEC } from 'src/util/public.util.js'

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase,
  endpoints: builder => ({
    getUser: builder.mutation({
      query: () => ({
        url: '/Account/Login/GetUserInfo',
        method: 'POST',
        body: {
          RequestVerificationToken: salt //here I want the salt from my redux store
        }
      }),
      transformResponse: response => {
        return aesDEC(response.data, salt); //here I want the salt from my redux store
      },
    }),
})
export const { useGetUserMutation } = authApi

I want to access to my redux-toolkit store data inside of the rtk-query endpoints.

how can I access my store from query or transformResponse methods?

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'
import { setUserInfo, setUserPermissions } from '../features/userSlice.js'
import { aesDEC } from 'src/util/public.util.js'

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase,
  endpoints: builder => ({
    getUser: builder.mutation({
      query: () => ({
        url: '/Account/Login/GetUserInfo',
        method: 'POST',
        body: {
          RequestVerificationToken: salt //here I want the salt from my redux store
        }
      }),
      transformResponse: response => {
        return aesDEC(response.data, salt); //here I want the salt from my redux store
      },
    }),
})
export const { useGetUserMutation } = authApi
Share Improve this question edited May 28, 2023 at 7:57 Alireza Kordkheili asked May 28, 2023 at 5:50 Alireza KordkheiliAlireza Kordkheili 641 silver badge7 bronze badges 1
  • 1 Replace query with a queryFn which will provide api.getState and also remove transformResponse. With queryFn you will do the work of both your query and your transformResponse – possum Commented May 28, 2023 at 9:35
Add a ment  | 

2 Answers 2

Reset to default 5

Neither query nor transformResponse have direct access to the Redux state, however, you can replace both with the queryFn which does. With queryFn the query function used is passed the query arg, the base query api object, any defined extraOptions, and the baseQuery function. Use api.getState to access the current state value.

Example, your code might look similar to the following:

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase,
  endpoints: builder => ({
    getUser: builder.mutation({
      queryFn: async (arg, api, extraOptions, baseQuery) => {
        const state = api.getState();
        const salt = state./* path to salt state value */;

        try {
          const { data } = await = baseQuery({
            url: '/Account/Login/GetUserInfo',
            method: 'POST',
            body: {
              RequestVerificationToken: salt
            }
          });
          return { data: aesDEC(data, salt) };
        } catch(error) {
          return { error };
        }
      },
    }),
  })
});

You can also get access to the state in fetchBaseQuery/prepareHeaders function like this if you need to set Auth or some general header:

export const DataApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ 
    baseUrl: `${process.env.REACT_APP_API_URL}`, 
    prepareHeaders: (headers, {getState}) => {
      const state = getState();
      headers.set(HEADER_AUTH, state?.auth?.value?.authorization);
    }
  }),
 ...
});
发布评论

评论列表(0)

  1. 暂无评论