Redux

Doot React is having a global state management setup based on React-Redux & Redux-Saga. The Store configurations are located in the src/redux folder.

All module's actions are exported from src/redux/actions.ts file, All module's reducer is exported from src/redux/reducers.ts file, All module's saga is exported from src/redux/sagas.ts file, The src/redux/index.ts file is handling global redux-store of the template.

How To Create Actions & Saga?

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

1. Create a folder named with your module in the src/redux folder and then create actions.ts, saga.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, sagas & reducers files located in the src/redux/ folder.
2. Add your action name in the actionTypes.ts file. E.g.

   export enum UsersActionTypes {
     GET_USERS_LIST = "@@users/GET_USERS_LIST",
   }
   
   export enum UsersState {
     users : any
   }
   

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

   export const getUsersList = (filters ?: any) => {
     return {
       type: UsersActionTypes.GET_USERS_LIST,
       payload: filters,
     }
   }
   

   type : action name

   payload : action parameters (if any)

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

   import { UsersActionTypes, UsersState } from "./types"
           
   const INIT_STATE : UsersState = {
     users: [],
   }
           
   const contacts = (state = INIT_STATE, action: any) => {
     switch (action.type) {
       case UsersActionTypes.GET_USERS_LIST:
         return {
           ...state,
           users: action.payload,
         }
               
       default:
         return state
       }
   }
           
   export default contacts
   

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

   function* getUsersList() {
     try {
       // you can perform any action here, E.g. call the api for get user's list                           
     } catch (error) {
       // error handler                                 
     }
   }
   
   // watchers
   function* contactsSaga() {
     yield takeEvery(UsersActionTypes.GET_USERS_LIST, getUsersList)
   }
                                         
   export default usersSaga;