Redux

Velzon has established routing that follows the Redux-Toolkit with Thunk setup. The configurations for the slices can be found within the src/slices folder.

All the module's reducer are exported from src/slices/index.js in javascript and src/slices/index.ts in typescript file, All module's thunk are exported from src/slices/thunk.js in javascript and src/slices/thunk.ts in typescript 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.js file. E.g.

import { createSlice } from "@reduxjs/toolkit";
const calendarSlice = createSlice({
  name: "calendar",
  initialState,
  reducers: {},
    extraReducers: (builder) => {
      builder.addCase(getEvents.fulfilled, (state, action) => {
      state.events = action.payload;
      });
      builder.addCase(getEvents.rejected, (state, action) => {
      state.error = action.payload.error || null;
      });
    },
});

Add your reducer name in the reducer.ts file. E.g.

import { createSlice } from "@reduxjs/toolkit";
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;
      });
    },
});

Add Thunk.js in javascript and Thunk.ts in typescript 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;
  }
});

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-pages folder.
Calendar :

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

Redux

How To Create Slice & Thunk ?

Reducers & Thunks

Layout :

Layout :

Layout :

Authentication :

Calendar :