Как кешировать данные компонента в react сессии?

Остановился на использовании redux. Есть страница, на странице примерно 5 фильтров. Каждый фильтр это коллекция, которая подгружается из API.

Реализовал хранение полученных данных для КАЖДОГО фильтра отдельно (отдельный слайс). сделал createAsyncThunk, который проверяет есть ли данные в сторе для загружаемого фильтра и если есть то не кидает запрос ещё раз, а возвращает данные которые уже есть.

Сделал метод loadCache в компоненте, которой дергает КАЖДЫЙ thunk и вытягивает данные в useState фильтра. ЭТО ДОЛГО, выходит около 1 секунды на прогрузку страницы с кешем. Есть ли способы как организовать хранение кеша сессии и что бы это не лагало и грузилось быстро?

loadCash:

const [purchases, setPurchases] = useState([]);
    const [rightholders, setRightholders] = useState([]);
    const [objects, setObjects] = useState([]);
    const [regions, setRegions] = useState([]);
    const [cities, setCities] = useState([]);
    const [statuses, setStatuses] = useState([]);

const loadCache = () => {
        dispatch(getPurchases()).then((res) => {
            setData(res.payload.data.data);
        });
        dispatch(getRightholders()).then((res) => {
            setRightholders(res.payload.filter(i => i.name !== '').map(rh => { return { value: rh.name }; }));
        });
        dispatch(getCities()).then((res) => {
            setCities(res.payload.filter(i => i.name !== '').map(rh => { return { value: rh.name }; }));
        });
        dispatch(getObjects()).then((res) => {
            setObjects(res.payload.filter(i => i.name !== '').map(rh => { return { value: rh.name }; }));
        });
        dispatch(getPurchasesStatus()).then((res) => {
            setStatuses(res.payload.filter(i => i.name !== '').map(rh => { return { value: rh.name }; }));
        });
        dispatch(getRegions()).then((res) => {
            setRegions(res.payload.filter(i => i.name !== '').map(rh => { return { value: rh.name }; }));
        });
    }

useEffect(() => {
        loadCache();
    }, [])

пример одного из слайса (они все одинаковые):

const initialState = {
    objects: null,
    isLoading: false,
}

export const getObjects = createAsyncThunk(
    "object",
    async (arg, {getState, rejectWithValue}) => {
        try{
            const state = getState();
            if(state.object.objects != null) {return state.object.objects;}
            else {return await UserService.getAllObjects();}
        }
        catch(error){
            return rejectWithValue(error.response.data)
        }
    }
)

const objectSlice = createSlice({
    name: 'object',
    initialState,
    extraReducers: (builder) => {
        builder
            .addCase(getObjects.pending, (state) => {
                state.isLoading = true;
            })
        builder
            .addCase(getObjects.fulfilled, (state, action) => {
                state.isLoading = false;
                state.objects = action.payload;
            })
        builder
            .addCase(getObjects.rejected, (state) => {
                state.isLoading = false;
            })
    }
})

export default objectSlice.reducer;