使用React挂钩将查询/突变调用与RTK查询链接在一起
React挂钩是React的一个特性，它允许我们在函数组件中使用React的状态和生命周期方法。使用React挂钩将查询/突变调用与RTK查询链接在一起，可以实现更高效和简洁的数据获取和管理。
RTK（Redux Toolkit）是一个由Redux官方推出的工具集，旨在简化Redux的使用。它提供了一种名为RTK Query的数据获取解决方案，可以帮助我们更轻松地处理数据获取和缓存。
在使用React挂钩将查询/突变调用与RTK查询链接在一起时，我们可以按照以下步骤进行操作：
- 安装必要的依赖：
- 安装必要的依赖：
- 创建一个RTK查询API：
- 创建一个RTK查询API：
- 在组件中使用RTK查询和突变：
- 在组件中使用RTK查询和突变：
通过以上步骤，我们可以在React组件中使用RTK查询和突变，并将其与React挂钩一起使用，实现数据的获取和管理。RTK Query提供了缓存、自动重试、自动无效化等功能，可以大大简化我们的开发流程。
推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function）和腾讯云数据库（TencentDB）。腾讯云函数提供了无服务器的计算能力，可以用于处理查询和突变的逻辑；腾讯云数据库提供了可靠的数据存储和管理服务，可以用于存储和获取数据。
腾讯云函数产品介绍链接：腾讯云函数
腾讯云数据库产品介绍链接：腾讯云数据库
相关·内容
1回答
当我使用RTK查询时，我很难理解如何处理诸如HTTP请求之类的副作用。根据我通过阅读文档所理解的，如果我使用RTK查询，我就不必使用Redux，这将简化很多事情。
目前，我有一个简单的postsSlice，其中有一个getPosts减速器。我想在这个还原器中发出一个GET请求，以便得到所有的帖子，然后将状态设置为响应。我知道，如果我没有使用RTK查询，我需要在这里创建一个Redux操作。我可以使用RTK查询提供的useGetPostsQuery钩子轻松地在React组件中发出请求，但是考虑到它不是React组件或钩子，如何从Redux内部发出该请求呢？
export const postsSl
浏览 2提问于2022-11-09得票数 0
回答已采纳
2回答
如果我不对RTK查询使用Cache tags，RTK查询会缓存我的数据吗？
看见
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl: '/',
}),
endpoints: (build) => ({
getPosts: build.query({
query: () => '/posts',
浏览 16提问于2022-10-07得票数 0
2回答
我正在接收一个cat支柱，希望在使用RTK查询更改cat时从api中获取数据。但是它会产生错误--下面的错误：
React Hook "useGetProductsQuery" cannot be called inside a callback".
如何在更改RTK query时生成cat？
const Products = ({cat,filter,sort}) => {
const [products, setproducts] = useState([])
const [filters, setFilters] = useState([])
useE
浏览 25提问于2021-12-20得票数 1
2回答
我正在从jsonplaceholder获取数据。它工作正常。但是我想使用RTK查询向列表中添加新的位置。请求已成功提交，但新项目未添加到我的列表中。我做错什么了？
那是我的一份：
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const apiUsersSlice = createApi({
reducerPath: "apiUsersSlice",
baseQuery: fetchBaseQuery({
baseUrl:
浏览 11提问于2022-10-29得票数 0
回答已采纳
我正在尝试用RTK获取一些数据。GET方法工作正常。POST方法也可以工作，但不会更改数据。我还为自动重取添加了provideTags和invalidateTags，但仍然无法实现。
，这是我的商店
import { configureStore } from "@reduxjs/toolkit";
import { verdeApiSlice } from "../features/verde/verde-slice";
export const store = configureStore({
reducer: {
[verdeApiSl
浏览 9提问于2022-08-16得票数 2
回答已采纳
1回答
我为什么会犯这个错误？
Property 'jwt' does not exist on type '{ data: IAuthResponse; } | { error: FetchBaseQueryError | SerializedError; }'.
Property 'jwt' does not exist on type '{ data: IAuthResponse; }'.ts(2339)
我使用RTK查询并希望处理我的响应：
Query.tsx
import { createApi, fetchBaseQuer
浏览 10提问于2022-04-03得票数 4
回答已采纳
src/Service/Post.js import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query"
export const postAPi=createApi({
reducerPath:'postApi',
baseQuery:fetchBaseQuery({
baseUrl:"https://jsonplaceholder.typicode.com/",
}),
浏览 28提问于2021-10-11得票数 1
我在学习RTK查询。
因此，在测试中，我有以下错误：
The preloadedState argument passed to createStore has unexpected type of "array". Expected argument to be an object with the following keys: "queries", "mutations", "provided", "subscriptions", "config"
这是我的考验：
test("Can
浏览 23提问于2022-11-15得票数 0
回答已采纳
我正在使用RTK query，通过useGetUserQuery接口获取一条记录 Api调用可以，因为后端有结果。我使用sequelize和我的结果发送数据对象。我试图删除providestags，但我也遇到了同样的问题。 我的前端返回这个错误： rtk-query.esm.js:771 Uncaught (in promise) TypeError: Cannot read property 'providesTags' of undefined
at calculateProvidedByThunk (rtk-query.esm.js:771)
at rtk-query.
浏览 68提问于2021-08-24得票数 0
1回答
如何使RTK查询生成make的突变抛出拒绝？
当前的代码执行将进入，然后，如何到达这里。
getList({ id }).catch(() => {如何到达这里})；
baseQuery.js
import { fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react';
const baseQueryWithRetry = retry(
fetchBaseQuery({
baseUrl: process.env.REACT_APP_BASE_URL,
}),
{ m
浏览 3提问于2022-07-29得票数 1
回答已采纳
我刚刚开始学习RTK查询，无法显示依赖于获取数据(Albums.js)的组件。其任务是:要显示用户列表和按钮，当单击“相册”按钮时，我需要使用与单击用户具有相同id的相册列表显示模式。因此，当单击时，我可以在Redux和Network中看到相册，但是组件useGetAlbumsQuery()中没有数据。怎么了？ usersApi.js
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'
export const usersApi = createApi({
reducerPath
浏览 10提问于2022-09-28得票数 0
回答已采纳
最近，我开始使用RTK查询来获取应用程序中的数据。在其中一个用例中，我希望使用createAPI突变的结果，其中我已经在服务器上创建了一个资源一次。这涉及到创建一个特定的有效负载。
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const createResource = createApi({
reducerPath: 'someReducerPath',
baseQuery: fetchBaseQuery({ baseUrl: win
浏览 10提问于2022-11-17得票数 1
回答已采纳
2回答
我已经成功地使用Axios编写了我的应用程序来获取内容。到目前为止，它被设置为在某些事件发生时获取内容(比如单击了submit按钮)。然而，我正在试验Redux的RTK查询解决方案。这个包生成钩子，在它们的中，它们提供了简单的组件级示例来调用挂载上的钩子。
我如何利用这些RTK-钩子(和一般的钩子)来将它们绑定到像onClick**，** onSubmit**，和条件事件这样的行为上？**我知道这与准则相冲突，但我无法想象RTK-查询会如此有限，只允许组件级的onMount API调用。
我正在阅读一些相关的文章，我试图找出这一点/等待一个有用的例子：
第二篇文章似
浏览 3提问于2021-09-08得票数 16
回答已采纳
3回答
我看了一篇教程，了解redux工具包是如何工作的。他现在使用了一些提供服务的在线api，所以我需要为我的使用定制它，所以我确实更改了名称和urls。
这是我的store.js
import {configureStore} from '@reduxjs/toolkit'
import {setupListeners} from '@reduxjs/toolkit/query'
import { postApi } from './actions/productAction'
export const store = configureS
浏览 10提问于2022-02-25得票数 1
2回答
我使用RTK查询api进行登录，当登录成功后，通过响应头获取令牌。
是否有机会从响应头访问“授权”。我尝试构建一个自定义baseQuery，但失败了。
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { ILoginUser } from "./types";
const api = process.env.REACT_APP_BASEURL_DEV;
export const authApi = createApi({
reducerPat
浏览 22提问于2022-06-17得票数 1
回答已采纳
当我在控制台中使用产品API中的数组方法(如map、filter等)时，以及在浏览器中没有得到任何信息时，我都会出错。我在这里使用redux-toolkit/query在我的Reactjs应用程序。我在我的系统中使用了react 18版本和Node.js 16版本。
Home.js
import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/
浏览 5提问于2022-11-03得票数 1
3回答
当我从createApi应用自动生成的钩子时。这个钩子会自动向服务器发出请求，但我只需要在特定情况下才提出请求。我试着根据Redux文档：()实现它，但是它没有成功。
我的实现：(src/features/posts/PostList.js)
import React, { useState } from 'react'
import { useGetPostsQuery } from '../api/apiSlice'
const PostExcerpt = ({ post }) => {
return (
<div>
浏览 12提问于2022-05-25得票数 1
回答已采纳
1回答
我有两种不同的阿皮。两种方法都使用RTK查询来执行不同的CRUD操作。其中一个非常好，但另一个却有错误。
TypeError: (0 , _api_addressApi__WEBPACK_IMPORTED_MODULE_2__.useGetAddress) is not a
function
这是我的addressApi.js，它不能工作
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const addressApi = createApi({
reduc
浏览 11提问于2022-12-03得票数 1
我这样设置我的Redux import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const baseUrl = 'http://localhost:6969/api/coins';
const createRequest = (url) => ({ url });
export const coinApi = createApi({
reducerPath: 'coinApi',
baseQuery: fetchBaseQuery(
浏览 60提问于2021-10-15得票数 0
2回答
我使用一个非常基本的RTK查询钩子从API中获取一些用户数据。如何访问存储在组件内部的存储中的数据？我无法从RTK查询生成的存储中获取数据。
我有一个简单的Post，我称之为getPosts钩子。在中，我可以在我的商店中看到来自RTK查询钩子的数据：
Post API
import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';
export interface Post {
id: number;
name: string;
fetched_at: string;
}
type Po
浏览 8提问于2022-03-07得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
