标签: rtk-query

有人可以帮助我使用 creatApi 和 redux 工具包中的查询实现来实现去抖功能。

提前致谢。

从哪里来getDefaultMiddleware？我正在阅读文档，它似乎神奇地出现在配置存储中。虽然这很棒，但它没有进入我的商店，而且......由于这个功能没有导入路径，而且我不知道如何解决这个问题，我可以使用一些指导。

RTK版本："@reduxjs/toolkit": "^1.6.1",

太棒了；

getDefaultMiddleware()我的商店中不存在+我还没有在文档中找到任何与它相关的有用内容。

这是我得到的错误：

这是我的store.ts

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { myApi } from './services/api';

import authorReducer from './slices/authorSlice';
import transcriptReducer from './slices/transcriptSlice';

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    middleware: (getDefaultMiddleware) =>
      // "This expression is not callable."
      getDefaultMiddleware().concat(myApi.middleware),
    author: authorReducer,
    transcript: transcriptReducer,
  },
});

setupListeners(store.dispatch);

// Infer the `RootState` and `AppDispatch` types from the store itself
export …

我正在使用Redux Toolkit (RTK) 和 Redux Toolkit Query (RTK-Query)。

在任何情况下仍然使用 是最佳实践、必要还是建议thunks，或者我应该将所有逻辑移至组件中？（handleLogin()如下所示）

const Login = () => {

    const dispatch = useDispatch()
    const [formState, setFormState] = useState({ name: '', password: '' })
    const [login, { isLoading }] = useLoginMutation()
    const { push } = useHistory()

    const handleLogin = async () => {
        try {
            const user = await login(formState).unwrap()
            dispatch(setCredentials(user));
        } catch (e) {
            console.error(e)
        }
    }


    return (
        <div>
            <input type="text" name="name" placeholder="name" />
            <input type="password" …

我创建了多个 RTK 查询 API 服务，并分成多个文件。对于这个问题我有两个服务：“合同”和“房产”。当合约更新时，合约服务应该能够使属性缓存失效，但即使在向合约服务提供“属性”标签之后，缓存也不会失效。

这是我的设置：

特性：

export const propertyApi = createApi({
    reducerPath: 'propertyApi',
    baseQuery: fetchBaseQuery({ baseUrl: `${API_BASE_URL}/properties` }),
    tagTypes: ['Properties'],
    endpoints: builder => ({
        // many endpoints
    })
})

export const {
    // many hooks
} = propertyApi

合同：

export const contractApi = createApi({
    reducerPath: 'contractApi',
    baseQuery: fetchBaseQuery({ baseUrl: `${API_BASE_URL}/contracts` }),
    tagTypes: ['Contracts', 'Properties'],
    endpoints: builder => ({
        // ...
        modifyContract: builder.mutation<Contract, { contract: Partial<ContractDto>, contractId: Contract['id'], propertyId: Property['id'] }>({
            query: ({ contract, contractId }) => {
                return { …

我正在尝试将 RTK-Query 中间件添加到嵌套存储结构中，当我添加 api 中间件时，出现非常长且非描述性的打字稿错误...

这是我的代码：

export const rootReducer = combineReducers({
  foo: fooReducer,
  nested: combineReducers({
    bar: barReducer,
    [myFooApi.reducerPath]: myFooApi.reducer,  
  })
});

const store = configureStore({
  reducer: rootReducer,
  
  middleware: (getDefaultMiddleware) =>   // Getting TS2322 error: type is not assignable to type...
    getDefaultMiddleware().concat(tokenListsApi.middleware)

});

[fooApi.reducerPath]当我像这样移动到减速器的根时，错误消失了：

export const rootReducer = combineReducers({
  foo: fooReducer,
  bar: barReducer,
  [fooApi.reducerPath]: fooApi.reducer,  
});

我正在寻找 RTK-Query Api 减速器的嵌套使用示例，但找不到任何...我错过了什么？

想要制作一个可以接收 CSV 的组件。(excel) 文件并将其上传到服务器。（具有拖放功能，以及响应式上传栏，显示上传到服务器的进度以及任何错误处理）

任何意见，将不胜感激。理想情况下希望在 RTK 查询中构建此功能。

const renderItem = ({ item  }: {item : siteDataCard}) => {

  return (
    <SiteCard key={item.key} siteName = {item.siteName} status={item.status} alarmCount ={item.alarmCount} siteCapacity ={item.siteCapacity}
    performanceRatio = {item.performanceRatio} dailyEnergy = {item.energyToday} outputActivePower = {item.outputActivePower}
    ></SiteCard>
  )
};



const AccountScreen = ({sites, ...props} : {sites :Array<site>}) => {
  let [skip, setSkip] = useState(true);
  let [dataLoaded, setDataLoaded] = useState(false);
  let [page, setPage] = useState(1);
  let [siteDataList, setSiteDataList] = useState<Array<siteDataCard>>([]);
  let [visible, setVisible] = useState(false);
  let [errors, setErrors] = useState('');
  let [dailyEnergy, setDailyEnergy] = useState({}); …

不知道如何在请求后访问标头。未使用的文档示例x-total-count

const guitarApi = createApi({
  reducerPath: 'GUITARS',
  baseQuery: fetchBaseQuery({ baseUrl: API_URL }),
  endpoints: (builder) => ({
    getAllGuitars: builder.query<AllGuitarsResponse, number>({
      query: (limit = 1) => `${APIRoute.Guitars}_limit${limit}`,
    }),
  }),
});

我像这样将它们放入组件中

const { data: guitarData } = useGetAllGuitarsQuery(searchingParams);

我在哪里可以访问响应标头？

我使用 createApi 创建了端点：

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}),
  tagTypes: ['Post'],
  endpoints: builder => ({
    getPosts: builder.query<Post[], void>({
      query: () => '/posts',
      providesTags: ['Post'],
    }),
   }), 
});

export const {useGetPostsQuery} = postsApi;

如何useGetPostsQuery()仅在按下按钮时而不是在安装组件时使用组件中的钩子？

我尝试将其添加到组件中并且它有效，但我不确定这是否是最佳实践：

const [click, setClick] = useState<boolean>(true);
const {data, error, isLoading} = useGetPostsQuery(undefined, {skip: click});

我使用RTKQuery来获取数据，如下所示：

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders,
  }),
  tagTypes: ['Products'],
  keepUnusedDataFor: 8600,
  endpoints: builder => ({
    getProperties: builder.query<IProduct[], IParams>({
      query: params => ({ url: 'products', params: { per_page: 40, ...params } }),
      transformResponse: ({ data }: { data: IProduct[] }) => data,
      providesTags: ['Products'],
    }),
  });

我对 Redux Toolkit 比较陌生，在使用任何 Redux 之前直接开始使用它。从 ReduxToolkit 文档中，我找到了两种在后端捕获和放置操作的方法。

1. 使用异步重击。
2. 中间件

我尝试使用中间件方法使用如下代码：

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected(action)) …