How To Create Actions & thunk ?

This example is created with new module's actions & thunk creation.

1. Create a folder named with your module in src/slices folder and then create actions.ts, thunk.ts, reducer.ts & actionTypes.ts files and follow the pattern of other modules added in this template.
2. Add your action name in the url_helper.ts file. E.g.

   export const GET_USERS_LIST = "/user-list";
   

3. Create the action in the fakebackend_helper.ts file. And make sure you pass the same action type as a type parameter which you added in fakebackend_helper.ts file E.g.

   import { del, get, post, put } from "./api_helper";
   import * as url from "./url_helper"
   
   export const getUsersList = () => api.get(url.GET_USERS_LIST);
   

4. Add your action to the reducer.ts as well. E.g.

   import { getUsersList } from "./thunk";
           
   export const initialState = {
     users: [],
     error: {}
   };
   
   const contacts = createSlice({
     name: 'ContactsSlice',
     initialState,
     reducers: {},
     extraReducers: (builder) => {
         builder.addCase(getUsersList.fulfilled, (state: any, action: any) => {
             state.users = action.payload;
         });
   
         builder.addCase(getUsersList.rejected, (state: any, action: any) => {
             state.error = action.payload.error || null;
         });
     }
   });
   
   export default contacts.reducer;
   

5. Add thunk function & watcher for action in thunk.ts file. E.g.

   import { createAsyncThunk } from "@reduxjs/toolkit";
   import { getUsersList as getUsersListApi } from "../../helpers/fakebackend_helper";
   
   const getUsersList = createAsyncThunk("ecommerence/getUsersList", async () => {
     try {
         const response = getUsersListApi();
         return response;
     } catch (error) {
         return error;
     }
   })
   export default getUsersList;
   

slices Actions & Reducers

• Layout :

  This slices modules is made for layout's it handles theme customizer's actions & values. You can find reducer & thunk files in src/slices/layouts folder.

• Authentication :

  This slices modules handles app authentication. You can find reducer & thunk files in src/slices/auth folder.

• Calendar :

  This slices modules handles app Calendar's functionalities. You can find reducer & thunk files in src/slices/calendar folder.

• Chat :

  This slices modules handles app Chat's functionalities. You can find reducer & thunk files in src/slices/chats folder.

• Contacts :

  This slices modules handles app Contact module's functionalities. You can find reducer & thunk files in src/slices/contacts folder.

• Crypto :

  This slices modules handles app Crypto-Currency's functionalities. You can find reducer & thunk files in src/slices/crypto folder.

• Dashboard :

  This slices modules handles app's default dashboard's functionalities. You can find reducer & thunk files in src/slices/dashboards folder.

• E-Commerce :

  This slices modules handles app e-commerce functionalities. You can find reducer & thunk files in src/slices/e-commerce folder.

• E-Mail :

  This slices modules handles app e-mail module's functionalities. You can find reducer & thunk files in src/slices/email folder.

• Invoices :

  This slices modules handles app invoice module's functionalities. You can find reducer & thunk files in src/slices/invoices folder.

• Projects :

  This slices modules handles app project module's functionalities. You can find reducer & thunk files in src/slices/projects folder.

• Layout :

  This slices modules handles app project module's functionalities. You can find utils, reducer & thunk files in src/slices/layouts folder.

• Tasks :

  This slices modules handles app task module's functionalities. You can find reducer & thunk files in src/slices/tasks folder.

• Jobs :

  This slices modules handles app job module's functionalities. You can find reducer & thunk files in src/slices/jobs folder.