对于redux的RTK查询,我是新手。
自动生成的钩子在以下两种方式上有什么不同。
从文档中看,第一种方法看起来是正确的,但它返回304网络状态。
第二条路,返回200。完美工作
1.
const ProjectsList = () => {
const {
data: projects,
isLoading,
isSuccess,
isError,
error,
} = useGetProjectsQuery("projectList") // -- return 304 network status
}
1.运行良好。但无法从存储区检索该对象。回去吧。
const {
data: projects,
isLoading,
isSuccess,
isError,
error,
} = useGetProjectsQuery() // -- return 200 network status
第三,Mememated返回un初始化值。这似乎是不正确的。
//APISLICE状态返回UNINITIZE
import { createSelector, createEntityAdapter } from "@reduxjs/toolkit"
import { apiSlice } from "@/app/api/apiSlice"
const projectsAdapter = createEntityAdapter({})
export const projectsApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getProjects: builder.query({
query: () => "/api/projects",
validateStatus: (response, result) => {
return response.status === 200 && !result.isError
},
transformResponse: (responseData) => {
const loadedProjects = responseData.map((project) => {
project.id = project._id
return project
})
return projectsAdapter.setAll(initialState, loadedProjects)
},
providesTags: (result, error, arg) => {
if (result?.ids) {
return [
{ type: "Project", id: "LIST" },
...result.ids.map((id) => ({ type: "Project", id })),
]
} else return [{ type: "Project", id: "LIST" }]
},
}),
}),
})
export const {
useGetProjectsQuery,
} = projectsApiSlice
export const selectProjectsResult =
projectsApiSlice.endpoints.getProjects.select()
// creates memoized selector
const selectProjectsData = createSelector(
selectProjectsResult,
(projectsResult) => {
console.log("projectsResult: ", projectsResult) // -> { isUninitialized: true, status: "uninitialize" }
return projectsResult.data
}
)
export const {
selectAll: selectAllProjects,
selectById: selectProjectById,
selectIds: selectProjectIds,
} = projectsAdapter.getSelectors(
(state) => selectProjectsData(state) ?? initialState
)
1条答案
按热度按时间67up9zun1#
因为您的
query
函数只是query: () => "/api/projects"
(所以,没有以任何方式使用参数),所以两者将对相同的资源发出完全相同的请求。它们之间没有区别,您看到的每个区别都可能是在服务器上随机发生的事情,并不绑定到这两个调用。
至于从商店取回,这是有区别的。您的代码
为创建的缓存条目创建名为
useGetProjectsQuery()
的选择器-如果需要useGetProjectsQuery("foo")
的缓存条目,则需要为projectsApiSlice.endpoints.getProjects.select("foo")
。请注意,几乎永远不应该有任何理由将这些选择器与Reaction组件一起使用--如果您不使用Reaction组件,它们就是一个逃生口。如果您正在使用Reaction,请将
useGetProjectsQuery
挂钩与selectFromResult
一起使用。我最近经常看到人们以这种方式使用
select
,我想这可以追溯到一个误解该功能的教程--你是在教程中了解到这一点的吗?你能分享那个教程吗?也许我可以说服作者改变这一部分。