Как получить состояние конечной точки API запросов RTK (isLoading, ошибка и т. Д.) В компоненте React Class?

Хорошо, я думаю, что просмотрел почти все документы RTK Query и прочитал о кешировании RTK Query. Похоже, это довольно большая часть, даже если в данный момент мне это не нужно.

Итак, я пытаюсь выполнить простой запрос с помощью RKT Query в компоненте на основе классов, а затем выбрать в Redux Store состояние isLoading для вызова конечной точки. Однако в настоящее время в render() {} моего LoginPage.jsx, то endpoint.<name>.select()(state) позвонить mapStateToProps в пределах LoginPageContainer.jsxпохоже, не работает. (См. Код ниже).

Глядя на примеры из документации по использованию RTK Query в классах , похоже, что мне не хватает «ключа кеширования» в .select(<cache_key>)(state)вызов. Однако я еще не включил теги в свою конечную точку (я считаю, что они мне пока не нужны).

Мой вопрос:

Может ли кто-нибудь пролить свет на то, как правильно использовать конечную точку, сгенерированную запросом RTK select()метод, используемый вне React Hooks? Я понимаю идею тегов кеша для автоматического повторного извлечения (но вряд ли, что здесь не так), но я не уверен, как и какой ключ кеша мне здесь не хватает, чтобы просто получить состояние запроса конечной точки в компоненте класса . Спасибо всем!

Код:

      // 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' }
      }),
    }),
  }),
})
Источник

2 ответа

Решение

"Ключ кеша" передан в 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')"], или любое другое поле кэшированных данных для этого элемента.

Источник 
      const result = api.endpoints.getPosts.select()(state)
const { data, status, error } = result

Обратите внимание, что в отличие от автоматически сгенерированных обработчиков запросов производные логические значения, такие как isLoading, isFetching, isSuccess, здесь недоступны. Вместо этого предоставляется необработанное перечисление состояния.

https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks

Источник
Другие вопросы по тегам