slices

Chaton React is having a global state management setup based on React-slices & slices-Thunk. The Store configurations are located in the src/slices folder.

All module's actions are exported from src/slices/index.ts file, All module's reducer is exported from src/slices/index.ts file, All module's Thunk is exported from src/slices/Thunks.ts file, The src/slices/index.ts file is handling global slices-store of the template.

How To Create Actions & Thunk?

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

1. Create a folder named with your module in the 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. Also do not forget to export it in main actions, Thunks & reducers files located in the src/slices/ folder.
2. Add your action name in the actionTypes.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 the 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 the 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;