Javascript Redux工具包查询(RTKQ)端点无效并重新验证多次触发

首先，我查看了Redux-Tools文档，但通过injecting endpoints和code splitting没有找到这个问题的答案.我不知道这是否是一个错误，但我也会在Github上发布以供TK使用.

Problem:当您使用TEKMutations 并具有多个injectEndpoints时，GET(查询)的重新验证会多次触发.我有多个injectEndpoints，因为我想要分离我的每个端点.我看到的是，对于每个包含injectEndpoint的单独文件，TK会 for each 文件获取额外的信息.

Expected:当您触发TEKMutations 时，无论API中有多少个injectEndpoints，任何GET(查询)的重新验证都应仅触发1次.这是第一次引入TK时的行为.

Code: store.js

import { configureStore } from '@reduxjs/toolkit'

// API
import { baseQuery } from 'api/baseQuery'
import { commentsApi } from 'api/commentsApi'
import { postApi } from 'api/postApi'

const reducer = {
  [baseQuery.reducerPath]: baseQuery.reducer,
  [commentsApi.reducerPath]: commentsApi.reducer,
  [postApi.reducerPath]: postApi.reducer
}

const middleware = getDefaultMiddleware =>
  getDefaultMiddleware()
  .concat(baseQuery.middleware)
  .concat(commentsApi.middleware)
  .concat(postApi.middleware)

export const store = configureStore({
  middleware,
  reducer
})

Base Query.js base Query.js

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

export const baseQuery = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com',
    prepareHeaders: headers => {
      headers.set('Accept', 'application/json')
      return headers
    }
  }),
  endpoints: () => ({}),
  reducerPath: 'api',
  tagTypes: [
    'comments',
    'posts'
  ]
})

Post-Api.js postApi.js

import { baseQuery } from './baseQuery'

export const postApi = baseQuery.injectEndpoints({
  endpoints: ({ mutation, query }) => ({
    addPost: mutation({
      invalidatesTags: ['posts'],
      query: ({ id }) => ({
        method: 'POST',
        url: `/posts`
      })
    }),
    getPosts: query({
      providesTags: ['posts'],
      query: () => `/posts`
    }),
  })
})

export const {
  useAddPostMutation,
  useGetPostsQuery
} = postApi

commentsApi.js

import { baseQuery } from './baseQuery'

export const commentsApi = baseQuery.injectEndpoints({
  endpoints: ({ mutation, query }) => ({
    getComments: query({
      providesTags: ['comments'],
      query: () => `/posts/1/comments`
    }),
  })
})

export const {
  useGetCommentsQuery
} = commentsApi

App.js

import { Button, Stack, Typography } from '@mui/material'
import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'
import { useAddPostMutation, useGetPostsQuery } from 'api/postApi'
import { useGetCommentsQuery } from 'api/commentsApi'

const App = () => {
  const { data = [] } = useGetPostsQuery()
  const { data: comments = []} = useGetCommentsQuery()
  const [addPost] = useAddPostMutation()

  console.log('comments', comments)

  return (
    <>
      <Button
        onClick={addPost}
        startIcon={<ChevronLeftRoundedIcon />}
      >
        Add Post
      </Button>
      <Stack
        spacing={3}
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          px: 3
        }}
      >
        <Typography>
          List of Posts
        </Typography>
        {data.map(({ id, title }) => (
          <Typography key={id} variant='body2'>
            {title}
          </Typography>
        ))}
      </Stack>
    </>
  )
}

export default App

index.js

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

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

这里唯一的依赖项是Redux、Redux-Tools、Material-UI、Ramda.我在这里使用jsonplaceholder API作为一个简单的例子，以便您可以轻松复制这个问题.

What is happening

1. 当您查看网络选项卡时，您将获得posts comments端点的初始GET
2. 单击"添加帖子"按钮
3. 将POSTemits 到posts终点
4. 网络选项卡向posts端点触发GET 3次
5. 1 201
6. 3 200 s GET，如果没有注入comments端点，则返回2 200 s GET.这意味着每注入一个端点，就会发生另外GET个端点

注: 我没有将reaction应用程序置于严格模式，因为这不会对最终结果产生任何影响.看起来每GET个人都在重新渲染App.js组件，但Redux Store不应该导致这个问题.在之前使用Redux和TEK的应用程序中，您可以轻松地像这样编写应用程序，并且永远不会看到您使用的每个Mutation都会触发多个GET.

问题图片:

• Before button click

• After button click