如何使用未决承诺来处理Redux工具包中的所有API加载？

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">
import { createSlice } from "@reduxjs/toolkit";
import { getUser, updateUser } from "./index";
import { getAllData, getData } from "../../logs/store/index";

const manageErrorAndLoading = (state, actionType, error) => {
  state.loading[actionType] = true;
  state.error[actionType] = error;
};

export const loadingSlice = createSlice({
  name: "loading",
  initialState: {
    loading: false
  },
  reducer: {
    toggleLoading: (state) => !state,
  },
  extraReducers: {
    [getUser.pending]: () => true,
    [getUser.fulfilled]: () => false,
    [getUser.rejected]: () => false,
    [updateUser.pending]: () => true,
    [updateUser.fulfilled]: () => false,
    [updateUser.rejected]: () => false,
    [getData.pending]: () => true,
    [getData.fulfilled]: () => false,
    [getData.rejected]: () => false,
  },
});

export const { toggleLoading } = loadingSlice.actions;
export default loadingSlice.reducer;
</script>

我已经使用此方法添加了加载，但效率不高。当一个API加载状态变为真时，加载在所有API上并行运行。

Answer 1

在

extraReducers(builder) {
builder.addMatcher(isPending, (state, action) => {
  // do what you want when a promise is pending
})}

ISPENDENG也可以用iSrejected和iSfulfield替换。