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.
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
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 Created & Crafted by SRBThemes.