UseGetSomeQuery参数值有什么不同

5jvtdoz2  于 2022-10-21  发布在  其他
关注(0)|答案(1)|浏览(174)

对于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
)
67up9zun

67up9zun1#

因为您的query函数只是query: () => "/api/projects"(所以,没有以任何方式使用参数),所以两者将对相同的资源发出完全相同的请求。
它们之间没有区别,您看到的每个区别都可能是在服务器上随机发生的事情,并不绑定到这两个调用。
至于从商店取回,这是有区别的。您的代码

export const selectProjectsResult =
  projectsApiSlice.endpoints.getProjects.select()

为创建的缓存条目创建名为useGetProjectsQuery()的选择器-如果需要useGetProjectsQuery("foo")的缓存条目,则需要为projectsApiSlice.endpoints.getProjects.select("foo")
请注意,几乎永远不应该有任何理由将这些选择器与Reaction组件一起使用--如果您不使用Reaction组件,它们就是一个逃生口。如果您正在使用Reaction,请将useGetProjectsQuery挂钩与selectFromResult一起使用。
我最近经常看到人们以这种方式使用select,我想这可以追溯到一个误解该功能的教程--你是在教程中了解到这一点的吗?你能分享那个教程吗?也许我可以说服作者改变这一部分。

相关问题