React的RTQ

//创建 studentApi文件

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";

//创建Api对象 需要一个对象作为参数

const studentApi = createApi({

  reducerPath: "studentApi",

  //指定查询的基础信息,发送请求的工具

  baseQuery: fetchBaseQuery({

    baseUrl: "/api",

  }),

  //endpoints 用来指定Api中的各种功能

  endpoints(build) {

    return {

      getStudents: build.query({

        query() {

          //用来指定请求的子路径

          return "shanghai?keyword=shanghai";

        },

        //设置数据缓存的时间 0 表示不缓存 在数值秒数内不会重新加载 默认是60s 一分钟后会重新发请求

        keepUnusedDataFor:0,

      })              

    };

  },

});

//endpoints中的函数 会自动生成钩子函数 命名规则如下

export const { useGetStudentsQuery } = studentApi;

export default studentApi;

 

 

//在store index.js中

 

//使用RTK构建store

import{configureStore, getDefaultMiddleware} from '@reduxjs/toolkit'

import schoolSlice from './school';

import stuSlice from './student';

import studentApi from './studentApi'; //导入

//创建store 需要一个配置对象作为参数

const store=configureStore({

    reducer:{

        student:stuSlice.reducer,

        school:schoolSlice.reducer,

        [studentApi.reducerPath]:studentApi.reducer

    },

　　//使用缓存

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

})

export default store;

 

//使用前 全局挂载

import React from 'react';

import ReactDOM from 'react-dom/client';

import { Provider } from 'react-redux';

import App from './App';

import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <Provider store={store}> //挂载redux

    <App />

  </Provider>

)

 

//在页面中使用

 

import React from 'react'

import { useGetStudentsQuery } from '../../store/studentApi'

export default function Demo2() {

//调用Api查询数据

const {data,isSuccess,isLoading}=useGetStudentsQuery();

console.log('data: ',data);

  return (

    <div>Demo2</div>

  )

 

}