EveryPublish/sau_web_react/src/modules/material/index.ts

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '../store';
import { getMaterials as fetchMaterials, IMaterial } from 'services/material';

const namespace = 'material';

interface IMaterialState {
  loading: boolean;
  materials: IMaterial[];
}

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

export const loadMaterials = createAsyncThunk(namespace + '/loadMaterials', async () => {
  return await fetchMaterials();
});

const materialSlice = createSlice({
  name: namespace,
  initialState,
  reducers: {
    setMaterials: (state, action: PayloadAction<IMaterial[]>) => {
      state.materials = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(loadMaterials.pending, (state) => {
        state.loading = true;
      })
      .addCase(loadMaterials.fulfilled, (state, action) => {
        state.loading = false;
        state.materials = action.payload;
      })
      .addCase(loadMaterials.rejected, (state) => {
        state.loading = false;
      });
  },
});

export const { setMaterials } = materialSlice.actions;
export const selectMaterials = (state: RootState) => state.material.materials;
export const selectMaterialLoading = (state: RootState) => state.material.loading;
export default materialSlice.reducer;