使用 redux 工具包时很多 addCase

Question

我有一个 React 应用程序，它在初始加载时执行大量提取调用以检索一些数据。

我使用 redux 和 redux 工具包来管理状态

如您所见，在我的 redux 切片中，有很多链式 addCase 调用，它们只是处理将我的提取的加载状态设置为 loading 或 failed

有没有办法避免这种情况并使我的代码更简洁？一种制作单个 addCase 的方法，该方法处理将所有提取的加载状态设置为 loading 以及 failed?

export const dashboardSlice = createSlice({
  name: "dashboard",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      //Co2Emission
      .addCase(fetchCO2EmissionData.pending, (state, action) => {
        state.co2.status = "loading";
      })
      .addCase(fetchCO2EmissionData.fulfilled, (state, action) => {
        state.co2.status = "succeeded";
        //We are just using the CPU data from first pod in the array. When when KG-121 it should just be state.Co2DiagramData = action.payload.values
        console.log(action.payload[0]);
        const transformedData = action.payload[0].values.map(d=>({Date: convertDate(d[0]*1000),"Grams of CO2": parseFloat(d[1])}));
        state.co2.data = transformedData;
      })
      .addCase(fetchCO2EmissionData.rejected, (state, action) => {
        state.co2.status = "failed";
      })
      //Active pods
      .addCase(fetchActivePods.pending, (state, action) => {
        state.pods.status = "loading";
      })
      .addCase(fetchActivePods.fulfilled, (state, action) => {
        state.pods.status = "succeeded";
        state.pods.currentValue = parseFloat(action.payload[0].values.pop().pop());
        state.pods.data = action.payload[0].values;
      })
      .addCase(fetchActivePods.rejected, (state, action) => {
        state.pods.status = "failed";
      })
      //Cpu usage
      .addCase(fetchCpuUsage.pending, (state, action) => {
        state.cpu.statusUsage = 'loading'
      })
      .addCase(fetchCpuUsage.fulfilled, (state, action) => {
        state.cpu.statusUsage = 'succeeded';
        state.cpu.currentUsage = parseFloat(action.payload[0].values.pop().pop());
        state.cpu.usage = action.payload[0].values;
      })
      .addCase(fetchCpuUsage.rejected, (state, action) => {
        state.cpu.statusUsage = 'failed'
      })
      //cpu allocation
      .addCase(fetchCpuAllocation.pending, (state, action) => {
        state.cpu.statusAllocation = 'loading'
      })
      .addCase(fetchCpuAllocation.fulfilled, (state, action) => {
        state.cpu.statusAllocation = 'succeeded';
        if(action.payload.values.length !== 0){
          state.cpu.currentAllocated = parseFloat(action.payload[0].values.pop().pop());
          state.cpu.allocated = action.payload[0].values;
        }
      })
      .addCase(fetchCpuAllocation.rejected, (state, action) => {
        state.cpu.statusAllocation = 'failed'
      })
      //memory usage
      .addCase(fetchMemoryUsage.pending, (state, action) => {
        state.memory.statusUsage = 'loading'
      })
      .addCase(fetchMemoryUsage.fulfilled, (state, action) => {
        state.memory.statusUsage = 'succeeded';
        state.memory.currentUsage = parseFloat(action.payload[0].values.pop().pop());
        state.memory.usage = action.payload[0].values;
      })
      .addCase(fetchMemoryUsage.rejected, (state, action) => {
        state.memory.statusUsage = 'failed'
      })
      //memory allocation
      .addCase(fetchMemoryAllocation.pending, (state, action) => {
        state.cpu.statusAllocation = 'loading'
      })
      .addCase(fetchMemoryAllocation.fulfilled, (state, action) => {
        state.memory.statusAllocation = 'succeeded';
        if(action.payload[0].values.length !== 0){
          state.memory.currentAllocated = parseFloat(action.payload[0].values.pop().pop());
          state.memory.allocated = action.payload[0].values;
        }
      })
      .addCase(fetchMemoryAllocation.rejected, (state, action) => {
        state.memory.statusAllocation = 'failed'
      })
  }
})

export default dashboardSlice.reducer;

Answer 1

您可能应该看看 RTK 查询，它也是 Redux Toolkit 的一部分并在内部处理所有这些东西 - 您只需描述您的 API 它会生成减速器、中间件甚至挂钩你自动。无需手动处理加载状态。

覆盖here in the official Redux tutorial

使用 redux 工具包时很多 addCase

Many addCase when using redux toolkit

reactjs

redux

redux-toolkit