如何从带有参数的查询中从适配器中提取选择器

Question

我正在尝试从 apiSlice 中的查询中提取选择器，如本文档中所述：https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced

文档给出了这个例子：

const usersAdapter = createEntityAdapter()

const initialState = usersAdapter.getInitialState()

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: responseData => {
        return usersAdapter.setAll(initialState, responseData)
      }
    })
  })
})

export const { useGetUsersQuery } = extendedApiSlice

// Calling `someEndpoint.select(someArg)` generates a new selector that will return
// the query result object for a query with those parameters.
// To generate a selector for a specific query argument, call `select(theQueryArg)`.
**// In this case, the users query has no params, so we don't pass anything to select()**
export const selectUsersResult = extendedApiSlice.endpoints.getUsers.select()

const selectUsersData = createSelector(
  selectUsersResult,
  usersResult => usersResult.data
)

export const { selectAll: selectAllUsers, selectById: selectUserById } =
  usersAdapter.getSelectors(state => selectUsersData(state) ?? initialState)

现在，我需要有 selectById 选择器（默认情况下将 userid 作为第二个参数）。 当我的查询看起来像这样时，我无法拥有一个可用的 selectById 选择器

endpoints: builder => ({
    getUsers: builder.query({
      query: (applicationId) => `/application/${applicationId}/users`,
      transformResponse: responseData => {
        return usersAdapter.setAll(initialState, responseData)
      }
    })
  })

当我有这种带参数的查询时，如何从适配器中提取 selectById 选择器以及如何在带有 useSelector 的组件中使用它？

感谢任何帮助我的人

Answer 1

我觉得你的概念有点不匹配，所以会导致混乱。

首先，让我们澄清一下，这是您使用的选择器 - 它不是您在

usersAdapter

中的状态的选择器，而是 RTK-Q 自己的状态的选择器。 通过处理transformResponse中的响应，您只需将数据从它复制到您的

usersAdapter

的状态。

因此，考虑到这一点，您应该具体说明要选择哪个州。如果您希望从“最终目的地”（即适配器的状态）获取它，则应该通过以下方式完成：

const usersSelectors = **usersAdapter**.getSelectors(
  (state) => state.users // or something like that
)

否则，使用 apiSlices 中的选择器（如示例中的

extendedApiSlice

） - 您将从 RTK-Q 的缓存状态获取数据，该状态在缓存失效后可能不包含一些旧数据。如果这仍然是您的目标，那么限制在于 RTK-Q 的存储不是您可能期望的带有 id 和值的规范化存储，而是键值对，其中键是您的请求，值是最后的结果（用户数组在你的情况下）。因此，如果您没有定义用于通过 ID 选择特定用户的 API 端点，您将无法直接从 RTK-Q 的状态中选择它。但是您可以通过

applicationId

选择缓存的用户，并通过结果数组中的 id 找到您的用户。我敢打赌这不是您真正想要的，所以很可能您只需要为自己的商店准备选择器，正如我上面提到的。