RTKQ(React toolkit query)中的createApi方法

createApi

reducerPath:’’ 名称，唯一标识

baseQuery：’‘ 查询的基础信息，（发送请求的工具） axios，fetch

​ 例如fetchBaseQuery() 是一个函数需要一个对象作为参数

fetchBaseQuery({
  baseUrl:'http://localhost:1337/api/'  //基地址
})

endpoints(build){} 端点，用来指定Api各种功能，是一个方法(函数)

需要一个对象作为返回值

build 请求构建器，通过build来设置请求的相关信息

返回对象的键为方法名，值为build.query() 修改为build.mutation

然后build.query 又是一个方法，方法需要传参，参数为一个对象，这个对象为此次查询的信息

这个对象参数为这次查询需要用到的信息 ,他需要返回一个值，这个值与baseUrl拼接

endpoints(){
  return {
    getStudents:build.query({
      query(){
        return 'students'
      }
    }),
    
  }
}

完整代码

import {createApi} from '@reduxjs/toolkit/dist/query/react'

const studentApi=createApi({
  reducerPath:'students',
  baseQuery:fetchBaseQuery({
    baseUrl:'http://localhost:1337/api/'
  }),
  endpoints(build){
    return {
      getStudents:build.query({
        query(){
          return 'students'
        }
      })
    }
  }
})

Api 对象创建后，对象会根据各种方法自动生成对应的钩子函数

通过这些钩子函数，可以来像服务器发送请求

钩子函数的命名规则

钩子默认use开头，然后驼峰命名法

再加上query查询的

getStudents = = 》useGetStudentsQuery

在query外，query还有一个兄弟transformResponse(baseQueryReturnValue){}配置项

看名字就能看出来

他是一个转换响应数据的函数，里面baseQueryReturnValue 就是响应的数据

import {createApi} from '@reduxjs/toolkit/dist/query/react'

const studentApi=createApi({
  reducerPath:'students',
  baseQuery:fetchBaseQuery({
    baseUrl:'http://localhost:1337/api/'
  }),
  endpoints(build){
    return {
      getStudents:build.query({
        query(){
          return 'students'
        },
        transformResponse(baseQueryReturnValue){
          return baseQueryReturnValue.data
        }
      })
    }
  }
})

这是完整的一个RTKQ实例

纯手打，如有错误请指正

src/main.jsx

import ReactDOM from 'react-dom/client'
import App from './App'
import {Provider} from 'react-redux'
import store from './store'

const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
	<Provider store={store}>
  	<App/>
  </Provider>
)

src/store/studentApi/index.jsx

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

const studentApi = createApi({
  reducerPath:'studentApi',
  baseQuery:fetchBaseQuery({
    baseUrl:'http://localhost:1337/api/'
  }),
  endpoints(build){
    return {
      getStudents:build.query({
        query(){
          return 'students'
        },
        transformResponse(baseQueryReturnValue){
          return baseQueryReturnValue.data
        }
      })
    }
  },
})

export const {useGetStudentsQuery}=studentApi
export default studentApi

src/store/index.jsx

import {configureStore} from '@reduxjs/toolkit'
import studentApi from './studentApi'

const store = configureStore({
  reducer:{
    [studentApi.reducerPath]:studentApi.reducer
  },
  middleware:getDefaultMiddleware=>getDefaultMiddleware().concat(studentApi.middleware)
  // 缓存
})

export default store

src/App.jsx

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

function App(){
  // useGetStudentsQuery返回三个数据
  // data为响应数据
  // isSuccess 为是否响应完成
  // isLoading 为是否正在加载
  const {data,isSuccess,isLoading} = useGetStudentsQuery()
  return (
  	<div>
      {isSuccess && data.map(item=>
        <ul key={item.id}>
           <li>{item.attributes.username}</li>
           <li>{item.attributes.age}</li>
           <li>{item.attributes.sex}</li>
           <li>{item.attributes.address}</li>
        </ul>
      )}
    </div>
  )
}
export default App

显示效果