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.