如何通过在 Redux RTK 中的 endpoint.select() 中传递 arg 来获取选择器答案

【问题标题】：How to getSelectors through passing arg in endpoint.select() in Redux RTK如何通过在 Redux RTK 中的 endpoint.select() 中传递 arg 来获取选择器
【发布时间】：2022-06-12 13:26:00
【问题描述】：

我目前有这段代码。

const initialState = documentsAdapter.getInitialState()
export const setupsApiSlice = apiSlice.injectEndpoints({
    tagTypes: ['Setup'],
    endpoints: builder => ({
        getSetups: builder.query({
            query: (documentId) => ({
                url: `/documents/${documentId}/setups`,
                method: 'GET'
            }),
            providesTags: ['Setup']
        }),
       
    })
})


export const {
    useGetSetupsQuery,
    useAddSetupsMutation,
    useUpdateSetupsMutation,
    useDeleteSetupsMutation
} = apiSlice

现在我想利用 getSelector 并执行类似的操作（未实现）。

export const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select()

// Creates memoized selector
const selectSetupsData = createSelector(
    selectSetupsResult,
    setupsResult => setupsResult.data // normalized state object with ids & entities
)

export const {
    selectAll: selectAllSetups,
    selectById: selectSetupById,
    selectIds: selectSetupIds,
} = setupsAdapter.getSelectors(state => selectSetupsData(state) ?? initialState)

我遇到的问题是 endpoint.select() 在我的情况下需要一个参数，以便我可以在正确的 documentId 上调用设置。我知道我可以调用所有设置，然后过滤掉具有相同 documentId 的设置，但我想知道是否还有其他方法。即使这意味着不调用 endpoints.select() 并且仍然能够使用 getSelectors()。

【问题讨论】：

标签： react-redux redux-toolkit rtk-query

【解决方案1】：

const initialState = documentsAdapter.getInitialState()
export const setupsApiSlice = apiSlice.injectEndpoints({
    tagTypes: ['Setup'],
    endpoints: builder => ({
        getSetups: builder.query({
            query: (documentId) => ({
                url: `/documents/${documentId}/setups`,
                method: 'GET'
            }),
            // Add transformResponse
            transformResponse: (responseData) => {
                return documentsAdapter.setAll(initialState, responseData)
            },
            providesTags: ['Setup']
        }),
       
    })
})


// Define function to get selectors based on arguments (query) of getSetups
export const getSelectors = (
  query,
) => {
  const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select(query)

  const adapterSelectors = createSelector(
    selectSetupsResult,
    (result) => documentsAdapter.getSelectors(() => result?.data ?? initialState)
  )

  return {
    selectAll: createSelector(adapterSelectors, (s) =>
      s.selectAll(undefined)
    ),
    selectEntities: createSelector(adapterSelectors, (s) =>
      s.selectEntities(undefined)
    ),
    selectIds: createSelector(adapterSelectors, (s) =>
      s.selectIds(undefined)
    ),
    selectTotal: createSelector(adapterSelectors, (s) =>
      s.selectTotal(undefined)
    ),
    selectById: (id) => createSelector(adapterSelectors, (s) =>
      s.selectById(s, id)
    ),
  }
}

然后你可以在组件中使用它：

  const { isFetching } = useGetSetupsQuery({id: 1})

  // Dinamically get selectors based on parent query
  const { selectAll: selectAllFromId1, selectById: selectByIdFromId1 } = getSelectors({id: 1})

  // Use selectors based on parent id 1
  const allFromId1 = useSelector(selectAllFromId1)
  const setup1fromId1 = useSelector(selectByIdFromId1(5)) // get id 5

【讨论】：