使用 redux 存储自定义 RTK 查询查询/突变体答案

【问题标题】：Customising RTK-query query / mutation body with redux store使用 redux 存储自定义 RTK 查询查询/突变体
【发布时间】：2021-12-21 15:29:32
【问题描述】：

我想在这个 createApi 函数中使用 current redux store data 来更改 postBody 变量来查询 body。我的意思是，如果可能的话，我想从 store 中获取一个 redux 节点，并将数据与 postBody 合并。

export const loginIdentityApi = createApi({
  reducerPath: 'loginIdentity',
  baseQuery,
  tagTypes: ['Login'],
  endpoints: (build) => ({
    postLogin: build.mutation<TApiResponse, TPostBody>({
      query: (postBody: TPostBody) => ({
        url: urlPrep(signin, {
          updateCookies: true,
        }),
        method: 'POST',
        body: postBody,
      }),

      transformResponse: (response: TApiResponse) => {
        return response
      },
      invalidatesTags: ['Login'],
    }),
  }),
})

【问题讨论】：

标签： typescript redux-toolkit rtk-query

【解决方案1】：

这在设计上是不可能的。

如果可能发生这样的事情，您的请求和您的状态将不同步，或者需要一些非常复杂的跟踪逻辑来确定哪个状态更改会触发重新获取。

因此，您可以在其中获取的所有数据仅通过 arg。

在您的组件中获取该数据并将其作为 arg 传递。

const dataFromStore = useSelector(selectMyDataFromStore)
const result = useMyQuery({ body: dataFromStore })

【讨论】：

【解决方案2】：

感谢您的回复@phry，

我在 RTK 网站上找到了这个文档；

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query

如果我使用这样的状态呢？

export const shippingInfoApi = createApi({
  reducerPath: 'shippingInfo',
  baseQuery,
  tagTypes: ['ShippingInfo'],
  endpoints: (build) => ({
    putShippingInfo: build.mutation<TApiResponse, TPostBody>({
      async queryFn(_arg, { getState }, _extraOptions, fetchWithBQ) {
        const state = getState()
        const shipModeId = state.shippingOptions.queries['getShippingOptions(null)'].data[0].value;
        await fetchWithBQ({
          url: urlPrep(shippingInfo, {
            updateCookies: true,
          }),
          method: 'PUT',
          body: { ..._arg, shipModeId },
        })
      },
    }),
  }),
})

而且我也不知道如何从这种状态获得data

state.shippingOptions.queries['getShippingOptions(null)'].data[0].value

【讨论】：

出于我回答中的原因，我真的建议您这样做。这在技术上是可行的，但我真的不建议这样做。