slice.md

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import type { RootState } from 'src/store/store'
import { SuccessListAPIResponse } from 'src/types/api-response';
import { MessageCategory } from 'src/types/category';
import { msgCategoriesService } from '@services/msg-categories.service';

// declaring the types for our state
export type MsgCategoriesState = {
    categories: Array<MessageCategory>,
    loading: boolean,
    error: boolean,
    message: string,
    reload: boolean
}

const initialState: MsgCategoriesState = {
    categories: [],
    loading: false,
    error: false,
    message: "",
    reload: false
}
export const getCategories = createAsyncThunk('GET_CATEGORIES', async () => {
    const response = await msgCategoriesService.getAll();
    return response
  })
  export const triggerReloadCategories = createAsyncThunk('RELOAD_CATEGORIES', async () => {
  })
  
  
  export const categoriesSlice = createSlice({
    name: 'categories',
    initialState,
    reducers: {
    },
  
    extraReducers: builder => {
      builder
        .addCase(getCategories.pending, state => {
          state.loading = true;
        })
        .addCase(getCategories.fulfilled, (state, { payload }) => {
          state.loading = false;
          state.categories = ((payload as SuccessListAPIResponse).content as Array<MessageCategory>);
        })
        .addCase(getCategories.rejected, state => {
          state.loading = false
          state.error = true
        })
        /*Reload categories*/
        .addCase(triggerReloadCategories.pending, state => {
          state.reload = false;
        })
        .addCase(triggerReloadCategories.fulfilled, (state, { payload }) => {
          state.reload = true;
        })
        .addCase(triggerReloadCategories.rejected, state => {
          state.reload = false
        })
    },
  })
  
  export const selectedMsgCategories = (state: RootState) => state.categories
  
  export default categoriesSlice.reducer