reactjs 如何将RTK查询放入存储/切片中?

lb3vh1jj  于 2023-05-28  发布在  React
关注(0)|答案(3)|浏览(276)

我刚开始使用RTK查询,但是遇到了一个问题
我的应用程序在一个大的JSON中包含所有设置,因此我创建了一个RTK查询来获取设置。在本教程中,示例是关于在组件中使用useQuery钩子并立即显示结果的,但由于设置太大,需要多个页面/组件来显示它并允许用户更改设置
因为设置需要更改,所以我觉得把状态放到store里是个好主意,我的问题是怎么把API结果放到store里?
我可以看到围绕它的一些方法
1.在一个组件中使用useQuery,当它产生结果时,执行一个分派以将数据放到存储中
1.将API中的useQuery放在所有组件中使用它并使用它来获取缓存数据,那么就没有必要将其放在存储中并使用组件状态来设置更改(我不确定这种方法,因为有很多设置-即使跨不同页面划分,它似乎也不正确使用组件状态来管理它)
我是RTK和RTK查询的新手,只是想知道什么是最好的/好的方法?

a0zr77ik

a0zr77ik1#

使用RTK查询隐含地意味着“将数据放入存储”。它会创建一个存储切片,为您管理所有数据。您可以在任何需要数据的地方使用useQuery,您可以从存储中获取数据,也可以在必要时请求新数据。
大多数情况下,你不应该把数据复制到其他地方,因为你必须做一些手工清理等事情。那么。
我也可以推荐浏览RTK-Q的教程章节,这些章节刚刚添加到官方Redux教程中。他们非常深入。
https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics

wfsdck30

wfsdck302#

从文档:
但是,当您使用RTK查询时,会发生思维转变。我们不再考虑“管理国家”本身。相反,我们现在考虑的是“管理缓存数据”。我们现在不再试图自己编写reducer,而是将重点放在定义“这些数据来自哪里?”“,“应如何发送此更新?“,“何时应该重新获取此缓存数据?”,以及“应该如何更新缓存的数据?数据如何获取、存储和检索成为我们不再需要担心的实现细节。

jm2pwxwz

jm2pwxwz3#

import { configureStore } from "@reduxjs/toolkit";

import { TodosApi } from "./todosReducer";

import { PostApi } from "./postReducer";

export const store = configureStore({

  reducer: {

 [TodosApi.reducerPath]: TodosApi.reducer,

 [PostApi.reducerPath]: PostApi.reducer,

  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
    
    .concat(TodosApi.middleware)

    .concat(PostApi.middleware)

}

)

相关问题