Theme Configuration

Redux Toolkit simplifies Redux development by providing tools for efficient state management, including reducers, actions, middleware, and built-in support for async logic with less boilerplate.

src/slices/school/parents/reducer.ts

You can define all your reducers in the src/slices/school/parents/reducer.ts file to keep your Redux logic organized and modular within the application.

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { initStore } from "@src/utils/init_store";
import { Parents } from "@src/dtos";

interface ParentsState {
    parentsList: Parents[] | null;
    isLoading: boolean;
}

const initialState: ParentsState = {
    parentsList: initStore('d-parents-list'),
    isLoading: false,
};

const parentsSlice = createSlice({
    name: 'parents',
    initialState,
    reducers: {
        getParentsList(state, action: PayloadAction) {
            state.parentsList = action.payload;
        },

        // other reducer

    }
});

export const {
    getParentsList,
    // other reducer
} = parentsSlice.actions;

export default parentsSlice.reducer;

src/slices/school/parents/thunk.ts

All reducers from src/slices/school/parents/reducer.ts are imported into the src/slices/school/parents/thunk.ts file to manage asynchronous logic and actions centrally.

import { AppDispatch } from "@src/slices/reducer";
import { toast } from 'react-toastify';
import { addParentsList } from "./reducer";
import { getLocalStorage } from "@src/utils/crud_functions";

const SCHOOL_PARENTS_API = NEXT_PUBLIC_SCHOOL_PARENTS_LIST;
const IsApi = import.meta.env.VITE_REACT_APP_IS_API_ACTIVE === "true";

export const getParentsListData = () => async (dispatch: AppDispatch) => {
    try {
        if (IsApi === false) {
            const responseData = await getLocalStorage('d-parents-list');
            if (!responseData) {
                // your logic
            } else {
                // your logic
            }
        } else {
            // your logic
        }
    } catch (error: any) {
        const errorMessage = error.response?.data?.message || error.message || "Parents List Fetch Failed";
        toast.error(errorMessage, { autoClose: 3000 });
        console.error('Error fetching Parents data:', error);
    }
};

The reducer from src/slices/school/parents/reducer.ts is imported into the main reducer file src/slices/reducer.ts to combine it with other reducers for the overall state management of the application.

import {
  combineReducers,
  configureStore,
} from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

import parentsReducers from './school/parents/reducer';

const rootReducer = combineReducers({
  Parents: parentsReducers,
});

const reducer = (state: ReturnType | undefined, action: any) => {
    ....
};

export const makeStore = () =>
  configureStore({
    reducer,
  });

const store = makeStore();

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

export default store;

All code from the src/slices/school/parents/thunk.ts file is imported into the main thunk file src/slices/thunk.ts to centralize asynchronous actions across the application.

export * from './school/parents/thunk'

_app.tsx

All the Redux code, including reducers and thunks, is encapsulated in the global store within the _app.tsx file. This setup ensures that state management and asynchronous actions are accessible throughout the entire application.

import { Provider } from "react-redux";

<Provider store={store}>
    {getLayout(<Component {...pageProps} />)}
</Provider>

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.