javascript 当发生组件API调用或状态值更改时如何设置加载程序

x3naxklr  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(104)

我创建了一个react应用程序,其中包含很多组件,每个组件都有一个特定的商店,但我在全局商店中调用该商店。现在的问题是,每当有一些处于挂起状态的东西,如API调用发生或状态值更改时,我想显示加载器,然后在整个屏幕上显示加载器,但我想当我点击一个按钮或其他东西,并在这段时间,如果它需要时间,然后告诉我加载器。
其次,我尝试了手动调用API,比如在API调用变为true之前,之后它将变为false,但我有很多API调用。我不想这样,我想有一些通用函数,当API调用或其他事情发生时自动调用。

我使用了一个axios拦截器,其中每个API调用都进入拦截器,但我不能在那里设置加载器。

我已经尝试手动,但我希望它成为全球性的,不要设置为真/假的每一个调用或其他任何东西

q5lcpyga

q5lcpyga1#

reducer case函数***是***“看到”Thunk已被分派的函数。如果单独处理每个thunk太多,那么您可以使用matching utility来处理单个reducer case函数的多个操作。使用单个employee.loading状态。
示例:

import {
  createSlice,
  createAsyncThunk,
  isPending,
  isFulfilled,
  isRejected,
} from '@reduxjs/toolkit';

const initialState = {
  loading: false,
  data: [],
};

... createAsyncThunks ...

export const employeeSlice = createSlice({
  name: "employee",
  initialState,
  extraReducers: builder => {
    builder
      .addMatcher(
        isPending(saveEmployeeData, editEmployeeData, getallEmployeeData),
        (state) => {
          state.loading = true;
        }
      )
      .addMatcher(
        isFulfilled(saveEmployeeData, editEmployeeData, getallEmployeeData),
        (state, action) => {
          state.loading = false;
          state.data = action.payload 
        }
      )
      .addMatcher(
        isRejected(saveEmployeeData, editEmployeeData, getallEmployeeData),
        (state, action) => {
          state.loading = false;
          // set any error state ???
        }
      )
  },
});

相关问题