我正在使用 Redux Toolkit 和 RTK 查询 构建一个项目,并尝试从 API 获取一些条目。我正在使用 createEntityAdapter 的规范化数据方法,因为在某个组件中我需要将数据作为数组,所以我最终使用了选择器。现在我的问题是,由于我添加过滤器作为查询的参数,我的选择器停止工作。
我在这里研究了类似的问题,例如:“如何使用带参数的 RTK 查询选择器?”,但我太笨了,无法理解我应该修改的内容。我试图理解 RTK 查询文档,但我做不到。
从上面的问题中,我知道我的选择器还需要具有参数,以便准确地知道要选择什么,并且这不是推荐的模式,但我无法理解如何使其工作。
我的条目切片:
import { createSelector, createEntityAdapter } from '@reduxjs/toolkit'
import { apiSlice } from './apiSlice'
const entryAdapter = createEntityAdapter()
const initialState = entryAdapter.getInitialState({
ids: [],
entities: {},
})
export const entryApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
initialState,
getEntry: builder.query({
query: (filters) => ({
url: '/history',
params: filters,
}),
transformResponse: (responseData) => {
return entryAdapter.setAll(initialState, responseData)
},
providesTags: (result, error, arg) => [
{ type: 'Entry', id: 'LIST' },
...result.ids.map((id) => ({ type: 'Entry', id })),
],
}),
addEntry: builder.mutation({
query: (data) => ({
url: '/history/new',
method: 'POST',
body: data,
}),
invalidatesTags: [{ type: 'Entry', id: 'LIST' }],
}),
updateEntry: builder.mutation({
query: (initialEntry) => ({
url: `/history/${initialEntry.Id}`,
method: 'PUT',
body: {
...initialEntry,
date: new Date().toISOString(),
},
}),
invalidatesTags: (result, error, arg) => [{ type: 'Entry', id: arg.id }],
}),
deleteEntry: builder.mutation({
query: ({ id }) => ({
url: `/history/${id}`,
method: 'DELETE',
body: { id },
}),
invalidatesTags: (result, error, arg) => [{ type: 'Entry', id: arg.id }],
}),
}),
})
export const {
useGetEntryQuery,
useAddEntryMutation,
useUpdateEntryMutation,
useDeleteEntryMutation,
} = entryApiSlice
export const selectEntryResult = (state, params) =>
entryApiSlice.endpoints.getEntry.select(params)(state).data
const entrySelectors = entryAdapter.getSelectors(
(state) => selectEntryResult(state) ?? initialState
)
export const selectEntry = entrySelectors.selectAll
我在像这样的 Entries 组件中使用它
const {
data: entriesData = [],
refetch,
isLoading,
isSuccess,
isError,
error,
} = useGetEntryQuery(filters)
const entries = useSelector(selectEntry)
注意:如果我从获取查询中删除“过滤器”,一切都会像以前一样工作(当然,正如预期的那样)。
免责声明:我不知道我到底在做什么,我已经阅读了文档并且正在尝试弄清楚,所以非常感谢任何反馈。 谢谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号