如何使用 RTK 查询 createEntityAdapter 规范化具有“元”和“链接”条目的响应

Question

所以，我有一个得到分页用户的响应，它看起来像这样......

{
  data:[{...}, {...}],
  links: {first:..., last:...},
  meta: {current_page: 1, total: 400, from: 1, to: 10}
}

现在，当使用 createEntityAdapter 规范化数据时，我必须只将对象的“数据”数组传递给它，而不是整个响应responseData.data，否则它不会工作......

    const usersAdapter: any = createEntityAdapter({});
    const initialState = usersAdapter.getInitialState();
    
    export const usersApiSlice = apiSlice.injectEndpoints({
      endpoints: builder => ({
        getUsers: builder.query<MetadataObj, MetadataObj>({
          query: options => ({
            url: "/users",
            params: options,
          }),
          transformResponse: (responseData: MetadataObj) => {
            return usersAdapter.setAll(initialState, responseData.data);
          },
          providesTags: (result, error, arg) => {
            if (result?.ids) {
              return [
                { type: "User", id: "LIST" },
                ...result.ids.map((id: Number) => ({ type: "User", id })),
              ];
            } else return [{ type: "User", id: "LIST" }];
          },
        }),
      }),
    });
    
    export const { useGetUsersQuery } = usersApiSlice;
    
    export const selectUsersResult = usersApiSlice.endpoints.getUsers.select({ page: 1, per_page: 10 });
    const selectUsersData = createSelector(selectUsersResult, usersResult => usersResult.data);
    
    export const {
      selectAll: selectAllUsers,
      selectById: selectUserById,
      selectIds: selectUserIds,
    } = usersAdapter.getSelectors((state: RootState) => selectUsersData(state) ?? initialState);

现在，我如何获得“meta”和“links”键呢？ 我试图搜索文档，但他们总是假设响应是一个对象数组。

我现在所做的是在“usersApiSlice”旁边创建了一个“usersSlice”，然后像这样将元数据存储在其中......

import { createSlice } from '@reduxjs/toolkit';

import { MetadataObj } from '../../../types/globalTypes';
import { RootState } from '../../app/store';

type stateType = {
  requestMeta: MetadataObj;
};

const initialState: stateType = {
  requestMeta: {},
};

const usersSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setRequestMeta: (state, action) => {
      state.requestMeta = action.payload;
    },
  },
});

export const { setRequestMeta } = usersSlice.actions;
export const selectRequestMeta = (state: RootState) => state.user.requestMeta;
export default usersSlice.reducer;

然后我在 query 函数之后使用 transformResponse 函数从原始响应中捕获元并将其存储在 usersSlice 中

transformResponse: (responseData: MetadataObj, meta, arg) => {
  store.dispatch(setRequestMeta(responseData.meta));
   return usersAdapter.setAll(initialState, responseData.data);
}

但是，我觉得应该有更好的方法来处理这个问题。我不确定，但应该有。

任何帮助表示赞赏。

Answer 1

您找到更好的解决方案了吗？