REDUX
Redux Setup
Hybrix Material is having setup based on
React-Redux
&
Redux-Toolkit with Thunk. The slices configurations are
located in
src/slices
folder.
All module's reducer are exported from
src/slices/index.ts
file, All module's thunk are exported from
src/slices/thunk.ts
file is handling global redux-slices of the
template.
How To Create Slice & Thunk ?
This example is created with new module's Slice & Thunk creation.
-
Create a folder named with your module in
src/slices
folder and then create reducer.ts & thunk.ts files and follow the pattern of other modules added in this template. -
Add your reducer name in the reducer.ts
file. E.g.
const teamslice = createSlice({ name: 'Team', initialState, reducers: {}, builder.addCase(getTeam.fulfilled, (state: any, action: any) => { state.team = action.payload; }); builder.addCase(getTeam.rejected, (state: any, action: any) => { state.error = action.payload.error || null; }); }); export default teamslice.reducer;
-
Add Thunk file. E.g.
import { createAsyncThunk } from "@reduxjs/toolkit"; //Include Both Helper File with needed methods import {getTeam as getTeamApi } from "../../helpers/fakebackend_helper"; export const getTeam = createAsyncThunk("team/getTeams", async () => { try { const response = getTeamApi(); return response; } catch (error) { return error; } });
Store Reducers - Components Version
-
Layout :
This store modules is made for layout's reducers, it handles theme customizer's values. You can find reducer & thunk files in
src/slices/layouts
folder.
Store Reducers - Admin Version
-
Layout :
This store modules is made for layout's reducers, it handles theme customizer's values. You can find reducer & thunk files in
src/slices/layouts
folder. -
Authentication :
This store modules handles app authentication. You can find reducer & thunk files in
src/slices/auth
folder. -
Calendar :
This store modules handles app Calendar's functionalities. You can find reducer & thunk files in
src/slices/calendar
folder. -
Contacts :
This store modules handles app Contact module's functionalities. You can find reducer & thunk files in
src/slices/contact
folder. -
Team :
This store modules handles app team's functionalities. You can find reducer & thunk files in
src/slices/team
folder.