如何在 React Class 组件中获取 RTK 查询 API 端点状态（isLoading、错误等）？

Question

好的，我想我已经浏览了几乎所有 RTK Query 的文档，并阅读了 RTK Query 的缓存。看起来它是其中相当大的一部分，即使它不是我现在需要的东西。

因此，我尝试在基于 class 的组件中使用 RKT Query 进行简单查询，然后从 Redux Store select 端点调用的 isLoading 状态。但是，目前在我的 LoginPage.jsx 的 render() {} 中，LoginPageContainer.jsx 中对 mapStateToProps 的 endpoint.<name>.select()(state) 调用似乎不起作用。（见下面的代码）。

从 using RTK Query on classes 上文档中的示例来看，我似乎在 .select(<cache_key>)(state) 调用中缺少“缓存键”。但是，我还没有在我的端点中加入标签（我相信我还不需要它们）。

我的问题：

有人可以阐明在 React Hooks 之外使用的 RTK 查询生成端点的 select() 方法的正确用法是什么吗？我了解用于自动重新获取的缓存标签背后的想法（但这不太可能是这里的问题），但我不确定我在这里如何或缺少什么缓存键来获取运行端点查询状态在 class 组件中。谢谢大家！

代码：

// LoginPage.jsx
import React, { Component } from 'react'
import PT from 'prop-types'
import LoginForm from './components/LoginForm'

export default class LoginPage extends Component {
  static propTypes = {
    loginWithUsername: PT.func.isRequired,
    loginWithUsernameState: PT.object.isRequired
  }

  render() {
    // This value never updates
    const { isLoading } = this.props.loginWithUsernameState
    // always outputs "{"status":"uninitialized","isUninitialized":true,"isLoading":false,"isSuccess":false,"isError":false}"
    // Even during and after running the `loginWithUsername` endpoint query
    console.log(this.props.loginWithUsernameState)
    return (
      <div>
        {isLoading && 'Loading ...'}
        <LoginForm
          onSubmit={(values) => this.props.loginWithUsername(values)} />
      </div>
    )
  }
}

// LoginPageContainer.jsx
import { connect } from 'react-redux'
import { teacherApi } from './api'
import LoginPage from './LoginPage'

const { loginWithUsername } = teacherApi.endpoints

const mapStateToProps = (state) => ({
  loginWithUsernameState: loginWithUsername.select()(state)
})
const mapDispatchToProps = (dispatch) => ({
  loginWithUsername: (payload) => dispatch(loginWithUsername.initiate(payload))
})

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)

// api.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const teacherApi = createApi({
  reducerPath: 'teacherApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/teacher/' }),
  endpoints: (builder) => ({
    loginWithUsername: builder.query({
      query: (data) => ({
        url: 'login',
        method: 'post',
        body: data,
        headers: { 'Content-Type': 'application/json' }
      }),
    }),
  }),
})

Answer 1

传递给 endpoint.select() 的“缓存键”与您传递给挂钩的变量相同：

useGetSomeItemQuery("a");
useGetSomeItemQuery("b");

const selectSomeItemA = endpoint.select("a");
const selectSomeItemB = endpoint.select("b");

const itemAREsults = selectSomeItemA(state);
const itemBResults = selectSomeItemB(state);

这导致查找 state => state[apiSlice.reducerPath].queries["getSomeItem('a')"]，或者该项目的确切缓存数据字段。

如何在 React Class 组件中获取 RTK 查询 API 端点状态（isLoading、错误等）？

How to get an RTK Query API endpoint state (isLoading, error, etc) in a React Class component?

javascript

reactjs

redux

redux-toolkit

rtk-query