Many addCase when using redux toolkit

Viewed 2300

I have a react app that on initial load does a lot of fetch calls to retrieve some data.

I'm using redux with redux toolkit to manage state

As you can see, in my redux slice, there are a lot of chained addCase calls that simply handles setting loading states for my fetches to loading or failed

Is there a way to avoid this and make my code more concise? A way to make a single addCase that handles setting the loading state to loading for all fetches and equally for 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;
1 Answers

You should probably take a look at RTK Query, which is also a part of Redux Toolkit and handles all this stuff internally - you just describe your API and it generates the reducer, middleware and even hooks for you automatically. No need to handle loading states by hand.

It is covered here in the official Redux tutorial

Related