How to Reinitialize a Custom Svelte Store on Route Change in Dynamic Routes?

[d1d4r]

I’ve created a custom store named createInfiniteScrollStore for handling infinite scroll in my SvelteKit application. Here’s the code for the store:

export const createInfiniteScrollStore = (
    initState: any,
    loadMoreFn: () => Promise<{ news: News[]; lastVisible: DocumentSnapshot }>
) => {
    const store = writable(initState);
    let loadingMore = false;

    const { subscribe, set, update } = store;

    const loadMore = async () => {
        if (loadingMore) return;
        loadingMore = true;
        update((state) => ({ ...state, loading: true }));
        try {
            const { news, lastVisible } = await loadMoreFn();
            update((state) => ({
                news: [...state.news, ...news],
                lastVisible: lastVisible,
                loading: false,
                hasMore: news.length === ITEMS_PER_PAGE
            }));
        } catch (error) {
            console.error('Error loading more news:', error);
            update((state) => ({ ...state, loading: false }));
        } finally {
            loadingMore = false;
        }
    };

    const reset = (subcat: string) => {
        loadingMore = false;
        set({ news: [], lastVisible: null, loading: false, hasMore: true });
        loadMore();
    };

    return {
        ...store,
        subscribe,
        loadMore,
        reset
    };
};

This store works well in a single route, but I encounter issues when I try to reuse it in a dynamic route setup.

Problem:

When I navigate between dynamic routes (e.g., /tech/[subCat]), the store does not reinitialize with the new initState. Instead, it retains the previous state, leading to incorrect data being displayed.

Here’s how I'm using the store in my dynamic route:

<script lang="ts">
    import { TECHROUTES } from '$lib/utils/constants/index';
    import { createInfiniteScrollStore } from '$lib/store/createInfiniteScrollStore';
    import { page } from '$app/stores';
    import { getPaginateNews } from '$lib/data/home';
    import type { News } from '$lib/types';
    import type { PageData } from './$types';

    export let data: PageData;

    $: subcat = TECHROUTES[$page.params.subCat as keyof typeof TECHROUTES];

    const initState = {
        news: [] as News[],
        lastVisible: null,
        loading: false,
        hasMore: true
    };

    const scrollStore = createInfiniteScrollStore(initState, () =>
        getPaginateNews('subCategories', subcat, 20, $scrollStore.lastVisible)
    );
</script>

<main class="container space-y-20">
    <!-- Component Code -->
</main>

Question:

How can I ensure that the store reinitializes with the correct initState whenever the route changes? I want the store to reset and load new data based on the dynamic route parameter (subCat). What would be the best approach to achieve this?