关于使用redux-toolkit与react-query创建API的问题

Question

这与其说是一个问题，不如说是一个问题。对编码和redux-toolkit非常陌生，我已经构建了一个从服务器获取一堆项目的api。根据文档，这应该是一个简单的事务。

创建api，获取钩子，钩子将为你提供在组件中使用的属性。像这样。

const {
data: items, 
isError,
isLoading,
isSuccess,
} = useGetTravelItemsQuery();

然而，基于文档和一些在线教程，他们建议使用createEntityAdapter()对re响应进行一些排序。这需要额外的代码:

const travelItemsAdapter = createEntityAdapter<travelItem>({
sortComparer: (a, b) => {
let x = a.country.toLowerCase();
let y = b.country.toLowerCase();
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
},
});

这需要创建一个初始状态，以便您可以使用getInitialState()方法生成它。除此之外，你还必须将状态形式化，并在transformresponse中返回它，并提供标签，以便在任何时间无效时重新获取数据;更新，删除等。有几个问题。

难道API状态不知道您创建的tagTypes是否发生了变化吗?我觉得这里有很多样板文件。此外，响应随后被分割为两个实体和id，由于键入原因，我无法确定如何在组件中使用它。参见下面的完整API:

const baseURL = URL;
export const getItemsReqApi = createApi({
reducerPath: "getItemsApi",
baseQuery: fetchBaseQuery({ baseUrl: baseURL }),
tagTypes: ["travelItems"],
endpoints: (builder) => ({}),
});

const initialState = travelItemsAdapter.getInitialState();
export const extendedItemsSlice = getItemsReqApi.injectEndpoints({
endpoints: (builder) => ({
getTravelItems: builder.query<EntityState<travelItem>, void>({
query: () => "items.json",
transformResponse: (rawResults: travelItem[]) => {
const fetchedItems: travelItem[] = [];
for (let item in rawResults) {
fetchedItems.push({
...rawResults[item],
id: item,
});
}
return travelItemsAdapter.setAll(initialState, fetchedItems);
},
providesTags: (res) =>
res?.ids
? [
...res.ids.map((id) => ({ type: "travelItems" as const, id })),
{ type: "travelItems", id: "travelList" },
]
: [{ type: "travelItems", id: "listTravelItems" }],
}),
}),
});
export const selectTravelItemsResponse =
extendedItemsSlice.endpoints.getTravelItems.select();
export const selectTravelItemsData = createSelector(
selectTravelItemsResponse,
(travelItemsResponse) => travelItemsResponse.data
);
export const { useGetTravelItemsQuery } = extendedItemsSlice;
export const { selectAll: selectAllTravelItems } =
travelItemsAdapter.getSelectors(
(state: RootState) => selectTravelItemsData(state) ?? initialState
);

我确实看到了使用redux-toolkit的好处，但我认为我正在进入一个兔子洞，因为我学到了很多东西。以上是处理请求和创建API的好做法吗?

Answer 1

嗯。我是Redux的维护者，我认为你把事情弄得太复杂了:)

我假设你指的是我写的https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#transforming-responses。

RTK Query是一个文档缓存样式的工具。这意味着默认情况下，它只保存服务器返回的数据，格式完全相同。如果服务器响应是一个数组，则保存该数组。如果服务器返回一个对象，它保存该对象。

如果您想要将服务器发送的数据转换为不同的结构并保存，是的，您可以使用transformResponse来这样做。可以使用createEntityAdapter将接收到的数组转换为规范化的查找表并缓存规范化的值。

但是，这完全是可选的，而不是你需要一直做的事情。此外，要点是"必需品"。教程是向您介绍您可以使用Redux Toolkit做的许多不同的事情，但这个示例并不是说您必须总是这样做。

如果服务器发送给你一个数组，你想要做的就是确保它是排序的，你有几个选项:

• 在transformResponse中排序然后返回
• 在组件
中进行排序

这两个都不需要使用createEntityAdapter。