如何在getSelectors()中使用createEntityAdapter和RTK查询时访问查询参数

Question

我一直在遵循REDUX要点指南，我在第8部分将RTK查询与createEntityAdapter结合在一起。我正在使用指南在一个个人项目中实现它，在这个项目中，我的getUni端点有一个名为country的参数，如下面的代码片段所示。

我想知道，在查询键名不断变化的情况下，是否可以从代码段底部的状态访问country参数值。

​

import {
  createEntityAdapter,
  createSelector,
  nanoid
} from "@reduxjs/toolkit";
import {
  apiSlice
} from "../api/apiSlice";


const universityAdapter = createEntityAdapter({})

const initialState = universityAdapter.getInitialState();

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUni: builder.query({
      query: country => ({
        url: `http://universities.hipolabs.com/search?country=${country}`,
      }),
      transformResponse: responseData => {
        let resConvert = responseData.slice()
          .sort((a, b) => a.name.localeCompare(b.name))
          .map(each => {
            return { ...each,
              id: nanoid()
            }
          });

        return universityAdapter.setAll(initialState, resConvert)
      }
    })
  })
});

export const {
  useGetUniQuery
} = extendedApiSlice;


export const {
  selectAll: getAllUniversity
} = universityAdapter.getSelectors(state => {
  return Object.keys({ ...state.api.queries[<DYNAMIC_QUERY_NAME>]data }).length === 0  
? initialState : { ...state.api.queries[<DYNAMIC_QUERY_NAME>]data }
})

​

更新:我让它使用turnery操作符，因为RTK查询处理获取时创建了多个redux操作。想知道这是否是最佳实践，因为我还没有弄清楚如何访问country参数。

​

export const { selectAll: getAllUniversity } = universityAdapter
  .getSelectors(state => {

  return !Object.values(state.api.queries)[0]
    ? initialState : Object.values(state.api.queries)[0].status !== 'fulfilled'
      ? initialState : Object.values(state.api.queries)[0].data
})

​

Answer 1

我写了“要点”教程:)

其实我有点搞不懂你的问题是什么--你能明确说明你想做什么吗？

尽管如此，我会尝试提供一些希望相关的信息。

首先，大多数时候不需要手动调用someEndpoint.select() --而是调用const { data } = useGetThingQuery("someArg")，RTKQ将获取并返回它。只有在手动构建供其他地方使用的选择器时，才需要调用someEndpoint.select()。

其次，如果您正在手动构建一个选择器，请记住，someEndpoint.select()的要点是构造“一个为该缓存键返回整个缓存条目的选择器”。您通常希望从该缓存项中获得的只是接收到的值，该值存储为cacheEntry.data，在本例中，它将包含从transformResponse()返回的规范化{ ids : [], entities: {} }查找表。

从理论上讲，您可能可以这样做：

const selectNormalizedPokemonData = someApi.endpoints.getAllPokemon.select();

// These selectors expect the entity state as an arg, 
// not the entire Redux root state: 
// https://redux-toolkit.js.org/api/createEntityAdapter#selector-functions
const localizedPokemonSelectors = pokemonAdapter.getSelectors();

const selectPokemonEntryById = createSelector(
  selectNormalizedPokemonData ,
  (state, pokemonId) => pokemonId,
  (pokemonData, pokemonId) => {
    return localizedPokemonSelectors.selectById(pokemonData, pokemonId);
  }
)

Answer 2

一些更多的信息可能有助于查看Essrites教程中的代码发生了什么变化，背景- getLists端点有一个参数，在服务中选择：

export const getListsResult = (state: RootState) => {
  return state.tribeId ? extendedApi.endpoints.getLists.select(state.tribeId) : [];
};

我的选择器在切片里：

export const selectAllLists = createSelector(getListsResult, (listsResult) => {
  console.log('inside of selectAllLists selector = ', listsResult);
  return listsResult.data;
  // return useSelector(listsResult) ?? [];
});

现在，这个控制台将listsResult记录为ƒ memoized() {函数！不能像教程所建议的那样具有.data属性。另外，return useSelector(listsResult) -通过执行回忆录函数使其工作。

这就是我所取得的成就，但据我所知，Ess纲教程中的代码并不能正常工作.

但是，在这里使用https://codesandbox.io/s/distracted-chandrasekhar-r4mcn1?file=/src/features/users/usersSlice.js并添加相同的控制台日志：

const selectUsersData = createSelector(selectUsersResult, (usersResult) => {
  console.log("usersResult", usersResult);
  return usersResult.data;
});

显示它不是返回已记忆的函数，而是返回一个带有数据的对象。

不知道这种区别是不是因为我的端点上有一个参数.

Answer 3

select返回一个回忆录咖喱函数。因此，首先用相应的arg tribeId调用它，然后用state调用它。这将给出对应的链式选择器的result对象。

export const getListsResult = (state: RootState) => {
  return state.tribeId ? extendedApi.endpoints.getLists.select(state.tribeId)(state) : [];
};