State management with react and typescript

import React, { createContext } from "react";


export type RejectedFileType = {
    rejectedFiles: any[];
    currentPage: number;
    totalRecords: number;
    sortByObject: Record<string, string>
    loading: boolean;
    error: string,
    shouldReload: boolean,
    searchQuery: {
        invoiceNumber: string,
        startDate: string,
        endDate: string,
        rejectReason: string,
        rejectStage: string,
        paymentProcessor: string,
    }
}

let initialRejectedStateFromLocalStorage = localStorage.getItem("rejectedState") as any;

if (initialRejectedStateFromLocalStorage) {
    initialRejectedStateFromLocalStorage = JSON.parse(initialRejectedStateFromLocalStorage) as any
} else {
    initialRejectedStateFromLocalStorage = null as any;
}

console.log(initialRejectedStateFromLocalStorage)

const initialRejectedState: RejectedFileType = initialRejectedStateFromLocalStorage || {
    rejectedFiles: [],
    currentPage: 1,
    totalRecords: 0,
    sortByObject: {
        created_at: "DESC"
    },
    loading: true,
    error: "",
    shouldReload: true,
}

export enum REJECTED_REDUCER_ACTION {
    SET_DATA = "SET_DATA",
    SET_PARTIAL_DATA = "SET_PARTIAL_DATA",
    SET_RESET = "SET_RESET",
    SET_QUERY = "SET_QUERY",
    SET_REJECTED_FILES = "SET_REJECTED_FILES",
    SET_CURRENT_PAGE = "SET_CURRENT_PAGE",
    SET_TOTAL_RECORDS = "SET_TOTAL_RECORDS",
    SET_SORT_BY_OBJECT = "SET_SORT_BY_OBJECT",
    SET_LOADING = "SET_LOADING",
    SET_ERROR = "SET_ERROR",
    SET_SHOULD_RELOAD = "SET_SHOULD_RELOAD",
}

// create dynamic payload types for dispatch
type RejectedReducerActionType<T extends REJECTED_REDUCER_ACTION, P> = {
    type: T;
    payload: P;
};

// create a union of all possible actions
export type RejectedReducerAction =
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_DATA, typeof initialRejectedState>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_PARTIAL_DATA, Partial<typeof initialRejectedState>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_REJECTED_FILES, typeof initialRejectedState.rejectedFiles>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_CURRENT_PAGE, typeof initialRejectedState.currentPage>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_TOTAL_RECORDS, typeof initialRejectedState.totalRecords>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_SORT_BY_OBJECT, typeof initialRejectedState.sortByObject>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_LOADING, typeof initialRejectedState.loading>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_ERROR, typeof initialRejectedState.error>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_SHOULD_RELOAD, typeof initialRejectedState.shouldReload>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_RESET, {}>
    | RejectedReducerActionType<REJECTED_REDUCER_ACTION.SET_QUERY, typeof initialRejectedState.searchQuery>




const rejectedReducer = (state, action): RejectedFileType => {
    switch (action.type) {
        case REJECTED_REDUCER_ACTION.SET_REJECTED_FILES:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, rejectedFiles: action.payload }));
            return { ...state, rejectedFiles: action.payload };

        case REJECTED_REDUCER_ACTION.SET_CURRENT_PAGE:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, currentPage: action.payload }));
            return { ...state, currentPage: action.payload };

        case REJECTED_REDUCER_ACTION.SET_TOTAL_RECORDS:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, totalRecords: action.payload }));
            return { ...state, totalRecords: action.payload };

        case REJECTED_REDUCER_ACTION.SET_SORT_BY_OBJECT:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, sortByObject: action.payload }));
            return { ...state, sortByObject: action.payload };

        case REJECTED_REDUCER_ACTION.SET_LOADING:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, loading: action.payload }));
            return { ...state, loading: action.payload };

        case REJECTED_REDUCER_ACTION.SET_ERROR:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, error: action.payload }));
            return { ...state, error: action.payload };

        case REJECTED_REDUCER_ACTION.SET_SHOULD_RELOAD:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, shouldReload: action.payload }));
            return { ...state, shouldReload: action.payload };

        case REJECTED_REDUCER_ACTION.SET_DATA:
            localStorage.setItem("rejectedState", JSON.stringify(action.payload));
            return action.payload;

        case REJECTED_REDUCER_ACTION.SET_PARTIAL_DATA:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, ...action.payload }));
            return { ...state, ...action.payload };

        case REJECTED_REDUCER_ACTION.SET_RESET:
            localStorage.removeItem("rejectedState");
            return initialRejectedState;

        case REJECTED_REDUCER_ACTION.SET_QUERY:
            localStorage.setItem("rejectedState", JSON.stringify({ ...state, searchQuery: action.payload }));
            return { ...state, searchQuery: action.payload, shouldReload: true };

        default:
            return state;
    }
}

export const RejectedFileContext = createContext<
    {
        state: (typeof initialRejectedState);
        dispatch: React.Dispatch<RejectedReducerAction>;
    }
>(
    {
        state: initialRejectedState,
        dispatch: () => null
    }
);

export const RejectedFileProvider = (props) => {
    const [state, dispatch] = React.useReducer(rejectedReducer, initialRejectedState);
    return (
        <RejectedFileContext.Provider value={{ state, dispatch }}>
            {props.children}
        </RejectedFileContext.Provider>
    );
};