1

わかりました。RTK Query のドキュメントをほぼすべて読んで、RTK Query のキャッシングについて読んだと思います。現時点で必要なものではありませんが、かなり大きな部分を占めているようです。

そのため、クラスベースのコンポーネントで RKT Query を使用して簡単なクエリを実行し、Redux Store からエンドポイント呼び出しの isLoading 状態を選択しようとしています。ただし、現在、render() {}私のLoginPage.jsxでは、 内でのendpoint.<name>.select()(state) 呼び出しが機能していないようです。(以下のコードを参照)。mapStateToPropsLoginPageContainer.jsx

クラスでRTKクエリを使用するドキュメントの例を見ると、.select(<cache_key>)(state)呼び出しに「キャッシュキー」がないようです。ただし、エンドポイントにはまだタグを組み込んでいません (まだタグは必要ないと思います)。

私の質問：

select()React Hooksの外部で使用されるRTKクエリ生成エンドポイントのメソッドの適切な使用法について誰かが光を当てることができますか? 自動再フェッチのキャッシュ タグの背後にある考え方は理解していますが (ただし、ここで何が問題なのかはわかりません)、クラス コンポーネントで実行中のエンドポイント クエリの状態を取得するために、ここで欠落しているキャッシュ キーをどのように、またはどのキャッシュ キーが欠落しているかはわかりません。 . みんな、ありがとう！

コード：

// 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' }
      }),
    }),
  }),
})
4

1 に答える 1