Redux

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

All the module's reducer are exported from js/slices/index.ts . All module's thunk are exported from js/slices/thunk.ts 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 js/slices folder and then create reducer.ts & thunk.ts files and follow the pattern of other modules added in this template.

import { createSlice } from "@reduxjs/toolkit";

export const initialState: any = {
    events: [],
};
                                        
const calendarSlice = createSlice({
    name: "calendar",
    initialState,
    reducers: {
    getEvents: (state: any, action: any) => {
        state.events = action.payload;
    },
                                        
    getCategories: (state: any, action: any) => {
        state.categories = action.payload;
    },
    }
})
export const { getEvents, getCategories } = calendarSlice.actions;
export default calendarSlice.reducer;

Add Thunk.ts file. E.g.

import { calenderDefaultCategories, defaultevent, events } from "../../common/data";
import { getCategories, getEvents} from "./reducer";

 export const onGetEvents = () => async (dispatch: any) => {
    try {
      dispatch(getEvents(events));
    } catch (error) {
      return error;
    }
  }
   
  export const onGetCategories = () => async (dispatch: any) => {
    try {
      dispatch(getCategories(calenderDefaultCategories));
    } catch (error) {
      return error;
    }
  }