Redux

  1. Docs
  2. Redux

Redux Setup

Admin-Redux-Toolkit with Thunk

Toner React is having routing 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.

  1. 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.
  2. Add your reducer name in the reducer.ts file. E.g. 
    const calendarSlice = createSlice({
name: "calendar",
initialState,
reducers: {},
extraReducers: (builder) => {
  builder.addCase(getEvents.fulfilled, (state: any, action: any) => {
    state.events = action?.payload;
  });
  builder.addCase(getEvents.rejected, (state: any, action: any) => {
    state.error = action?.payload?.error || null;
  });
},
});
  3. Add Thunk file. E.g. 
    import { createAsyncThunk } from "@reduxjs/toolkit";

//Include Both Helper File with needed methods
import {
  getEvents as getEventsApi
} from "../../helpers/fakebackend_helper";

export const getEvents = createAsyncThunk("calendar/getEvents", async () => {
  try {
    const response = getEventsApi();
    return response;
  } catch (error) {
    return error;
  }
});
Store Reducers & Thunks

Components Version

  • Layout :

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

FrontEnd Version

  • Layout :

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

BackEnd Version

  • Layout :

    This store modules is made for layout's reducer, it handles theme customizer's reducers & 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.

  • Dashboard :

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

© Toner.
Design & Develop by Themesbrand