Access reader store setters directly without hook

2026-02-21 15:34:17 +01:00
parent 75cf18b254
commit daeb2a4e45
21 changed files with 118 additions and 216 deletions
--- a/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts
+++ b/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts
@@ -8,20 +8,21 @@

 import { useEffect } from 'react';
 import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
+
+export const useReaderAutoScroll = (isOverlayVisible: boolean, isStaticNav: IReaderSettings['isStaticNav']): void => {
+    const { isPaused } = useReaderAutoScrollStore((state) => ({
+        isPaused: state.autoScroll.isPaused,
+    }));

-export const useReaderAutoScroll = (
-    isOverlayVisible: boolean,
-    isAutoScrollPaused: boolean,
-    pauseAutoScroll: () => void,
-    resumeAutoScroll: () => void,
-    isStaticNav: IReaderSettings['isStaticNav'],
-): void => {
    useEffect(() => {
+        const { pause, resume } = getReaderAutoScrollStore();
+
        if (isOverlayVisible && !isStaticNav) {
-            pauseAutoScroll();
+            pause();
            return;
        }

-        resumeAutoScroll();
-    }, [isOverlayVisible, isAutoScrollPaused, isStaticNav]);
+        resume();
+    }, [isOverlayVisible, isPaused, isStaticNav]);
 };
--- a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx
+++ b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx
@@ -19,7 +19,7 @@ import { plural } from '@lingui/core/macro';
 import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
-import { useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
+import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';

 export const ReaderNavBarDesktopAutoScroll = ({
    autoScroll,
@@ -28,10 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
    setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
 }) => {
    const { t } = useLingui();
-    const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
-        isActive: state.autoScroll.isActive,
-        toggleActive: state.autoScroll.toggleActive,
-    }));
+    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);

    const updateTimeout = useRef<NodeJS.Timeout>(undefined);

@@ -40,7 +37,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
            <Button
                sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
                size="large"
-                onClick={toggleActive}
+                onClick={() => getReaderAutoScrollStore().toggleActive()}
                color={isActive ? 'secondary' : 'primary'}
                variant="contained"
                startIcon={isActive ? <PauseCircleFilledIcon /> : <PlayCircleFilledIcon />}
--- a/src/features/reader/hooks/useReaderSetSettingsState.ts
+++ b/src/features/reader/hooks/useReaderSetSettingsState.ts
@@ -13,16 +13,16 @@ import {
    useDefaultReaderSettings,
 } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
 import { isAutoWebtoonMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { ReadingMode, TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts';
+import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import { GetMangaReaderQuery } from '@/lib/graphql/generated/graphql.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { getReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';

 export const useReaderSetSettingsState = (
    mangaResponse: ReturnType<typeof requestManager.useGetManga<GetMangaReaderQuery>>,
    defaultSettingsResponse: ReturnType<typeof useDefaultReaderSettings>['request'],
    defaultSettings: ReturnType<typeof useDefaultReaderSettings>['settings'],
    defaultSettingsMetadata: ReturnType<typeof useDefaultReaderSettings>['metadata'],
-    setSettings: TReaderStateSettingsContext['setSettings'],
    setAreSettingsSet: (areSet: boolean) => void,
 ) => {
    useEffect(() => {
@@ -56,7 +56,7 @@ export const useReaderSetSettingsState = (
        );

        const finalSettings = getReaderSettingsFor(mangaFromResponse, profileSettings);
-        setSettings(finalSettings);
+        getReaderSettingsStore().setSettings(finalSettings);
        setAreSettingsSet(true);
    }, [mangaResponse.data?.manga, defaultSettings]);
 };
--- a/src/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts
+++ b/src/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts
@@ -13,7 +13,7 @@ import { useLingui } from '@lingui/react/macro';
 import { IReaderSettings, IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { READING_MODE_VALUE_TO_DISPLAY_DATA } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { getReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';

 const HIDE_PREVIEW_TIMEOUT = d(5).seconds.inWholeMilliseconds;

@@ -26,7 +26,6 @@ export const useReaderShowSettingPreviewOnChange = (
    tapZoneInvertMode: IReaderSettingsWithDefaultFlag['tapZoneInvertMode'],
    shouldShowReadingModePreview: IReaderSettings['shouldShowReadingModePreview'],
    shouldShowTapZoneLayoutPreview: IReaderSettings['shouldShowTapZoneLayoutPreview'],
-    setShowPreview: TReaderTapZoneContext['setShowPreview'],
 ) => {
    const { t } = useLingui();

@@ -55,9 +54,9 @@ export const useReaderShowSettingPreviewOnChange = (
            JSON.stringify(tapZoneInvertMode) !== JSON.stringify(previousTapZoneInvertMode.current);
        const showTapZoneLayoutPreview = shouldShowTapZoneLayoutPreview && didTapZoneLayoutChange;
        if (showTapZoneLayoutPreview) {
-            setShowPreview(true);
+            getReaderTapZoneStore().setShowPreview(true);
            if (isInitialPreview.current) {
-                setTimeout(() => setShowPreview(false), HIDE_PREVIEW_TIMEOUT);
+                setTimeout(() => getReaderTapZoneStore().setShowPreview(false), HIDE_PREVIEW_TIMEOUT);
            }
        }
        previousTapZoneLayout.current = tapZoneLayout;
--- a/src/features/reader/hotkeys/ReaderHotkeys.tsx
+++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx
@@ -27,7 +27,6 @@ import {
    getReaderAutoScrollStore,
    getReaderOverlayStore,
    getReaderSettingsStore,
-    getReaderTapZoneStore,
    useReaderSettingsStore,
 } from '@/features/reader/stores/ReaderStore.ts';

@@ -92,7 +91,6 @@ export const ReaderHotkeys = ({
            readingMode.value,
            readingDirection.value,
            scrollElementRef.current,
-            getReaderTapZoneStore().setShowPreview,
            scrollAmount,
        );
    });
@@ -115,7 +113,6 @@ export const ReaderHotkeys = ({
            readingMode.value,
            readingDirection.value,
            scrollElementRef.current,
-            getReaderTapZoneStore().setShowPreview,
            scrollAmount,
        );
    });
--- a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts
+++ b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts
@@ -7,15 +7,20 @@
 */

 import { MutableRefObject, useEffect } from 'react';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
-import { getReaderOverlayStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderOverlayStore,
+    getReaderTapZoneStore,
+    useReaderTapZoneStore,
+} from '@/features/reader/stores/ReaderStore.ts';

 export const useReaderHideOverlayOnUserScroll = (
    isOverlayVisible: boolean,
-    showPreview: TReaderTapZoneContext['showPreview'],
-    setShowPreview: TReaderTapZoneContext['setShowPreview'],
    scrollElementRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
+    const { showPreview } = useReaderTapZoneStore((state) => ({
+        showPreview: state.tapZone.showPreview,
+    }));
+
    useEffect(() => {
        const handleScroll = () => {
            if (isOverlayVisible) {
@@ -23,7 +28,7 @@ export const useReaderHideOverlayOnUserScroll = (
            }

            if (showPreview) {
-                setShowPreview(false);
+                getReaderTapZoneStore().setShowPreview(false);
            }
        };

--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx
@@ -22,7 +22,11 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap
 import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
 import { IconWebView } from '@/assets/icons/IconWebView.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { useReaderChaptersStore, useReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderPagesStore,
+    useReaderChaptersStore,
+    useReaderPagesStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';

 const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownloadInfo) => {
@@ -68,11 +72,7 @@ export const ReaderNavBarDesktopActions = memo(() => {
    }));

    const { t } = useLingui();
-    const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({
-        pageLoadStates: state.pages.pageLoadStates,
-        setPageLoadStates: state.pages.setPageLoadStates,
-        setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix,
-    }));
+    const pageLoadStates = useReaderPagesStore((state) => state.pages.pageLoadStates);

    const pageRetryKeyPrefix = useRef<number>(0);

@@ -88,13 +88,13 @@ export const ReaderNavBarDesktopActions = memo(() => {
            <CustomTooltip title={t`Retry errored pages`} disabled={!haveSomePagesFailedToLoad}>
                <IconButton
                    onClick={() => {
-                        setPageLoadStates((statePageLoadStates) =>
+                        getReaderPagesStore().setPageLoadStates((statePageLoadStates) =>
                            statePageLoadStates.map((pageLoadState) => ({
                                url: pageLoadState.url,
                                loaded: pageLoadState.loaded,
                            })),
                        );
-                        setRetryFailedPagesKeyPrefix(`${pageRetryKeyPrefix.current}`);
+                        getReaderPagesStore().setRetryFailedPagesKeyPrefix(`${pageRetryKeyPrefix.current}`);
                        pageRetryKeyPrefix.current = (pageRetryKeyPrefix.current + 1) % 1000;
                    }}
                    disabled={!haveSomePagesFailedToLoad}
--- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
@@ -15,14 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
 import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
-import { useReaderAutoScrollStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderAutoScrollStore,
+    useReaderAutoScrollStore,
+    useReaderSettingsStore,
+} from '@/features/reader/stores/ReaderStore.ts';

 const BaseReaderBottomBarMobileQuickSettings = () => {
    const { t } = useLingui();
-    const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
-        isActive: state.autoScroll.isActive,
-        toggleActive: state.autoScroll.toggleActive,
-    }));
+    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
    const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
        readingMode: state.settings.readingMode,
        readingDirection: state.settings.readingDirection,
@@ -44,7 +45,11 @@ const BaseReaderBottomBarMobileQuickSettings = () => {
                isDefaultable
                onDefault={() => ReaderService.deleteSetting('readingDirection')}
            />
-            <CheckboxInput label={t`Auto scroll`} checked={isActive} onChange={() => toggleActive()} />
+            <CheckboxInput
+                label={t`Auto scroll`}
+                checked={isActive}
+                onChange={() => getReaderAutoScrollStore().toggleActive()}
+            />
            <ReaderSettingAutoScroll
                autoScroll={autoScroll}
                setAutoScroll={(...args) => ReaderService.updateSetting('autoScroll', ...args)}
--- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
@@ -32,6 +32,7 @@ import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import {
+    getReaderProgressBarStore,
    useReaderPagesStore,
    useReaderProgressBarStore,
    useReaderSettingsStore,
@@ -73,10 +74,7 @@ const BaseReaderProgressBar = ({
        currentPageIndex: state.pages.currentPageIndex,
    }));
    const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
-    const { isDragging, setIsDragging } = useReaderProgressBarStore((state) => ({
-        isDragging: state.progressBar.isDragging,
-        setIsDragging: state.progressBar.setIsDragging,
-    }));
+    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);

    const progressBarRef = useRef<HTMLDivElement | null>(null);
    const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
@@ -147,11 +145,11 @@ const BaseReaderProgressBar = ({
        );

        clearTimeout(draggingDetectionTimeout.current);
-        draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250);
+        draggingDetectionTimeout.current = setTimeout(() => getReaderProgressBarStore().setIsDragging(true), 250);
    };

    const handleMouseUp = () => {
-        setIsDragging(false);
+        getReaderProgressBarStore().setIsDragging(false);
        clearTimeout(draggingDetectionTimeout.current);
    };

@@ -174,7 +172,7 @@ const BaseReaderProgressBar = ({
                >
                    {currentPage.name}
                </ReaderProgressBarPageNumber>
-                <ClickAwayListener onClickAway={() => setIsDragging(false)}>
+                <ClickAwayListener onClickAway={() => getReaderProgressBarStore().setIsDragging(false)}>
                    <ReaderProgressBarSlotsActionArea
                        {...slotProps?.progressBarSlotsActionArea}
                        onMouseDown={handleMouseDown}
--- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
@@ -25,6 +25,7 @@ import {
    useReaderProgressBarStore,
    useReaderScrollbarStore,
    useReaderSettingsStore,
+    getReaderProgressBarStore,
 } from '@/features/reader/stores/ReaderStore.ts';

 const BaseStandardReaderProgressBar = ({
@@ -44,9 +45,8 @@ const BaseStandardReaderProgressBar = ({
            progressBarPosition: state.settings.progressBarPosition,
            progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
        }));
-    const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
+    const { isMaximized, isDragging } = useReaderProgressBarStore((state) => ({
        isMaximized: state.progressBar.isMaximized,
-        setIsMaximized: state.progressBar.setIsMaximized,
        isDragging: state.progressBar.isDragging,
    }));

@@ -151,8 +151,8 @@ const BaseStandardReaderProgressBar = ({
                                pointerEvents: 'none',
                            }),
                        },
-                        onMouseEnter: () => setIsMaximized(true),
-                        onMouseLeave: () => setIsMaximized(false),
+                        onMouseEnter: () => getReaderProgressBarStore().setIsMaximized(true),
+                        onMouseLeave: () => getReaderProgressBarStore().setIsMaximized(false),
                    },
                    progressBarRoot: {
                        sx: {
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -35,6 +35,7 @@ import {
    useReaderProgressBarStore,
    useReaderScrollbarStore,
    useReaderSettingsStore,
+    getReaderProgressBarStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';

@@ -69,10 +70,7 @@ const BaseMobileReaderProgressBar = ({
        progressBarPosition: state.settings.progressBarPosition,
        progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
    }));
-    const { setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
-        setIsMaximized: state.progressBar.setIsMaximized,
-        isDragging: state.progressBar.isDragging,
-    }));
+    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -218,9 +216,9 @@ const BaseMobileReaderProgressBar = ({
    );

    useLayoutEffect(() => {
-        setIsMaximized(isVisible);
+        getReaderProgressBarStore().setIsMaximized(isVisible);

-        return () => setIsMaximized(false);
+        return () => getReaderProgressBarStore().setIsMaximized(false);
    }, [isVisible]);

    return (
--- a/src/features/reader/screens/Reader.tsx
+++ b/src/features/reader/screens/Reader.tsx
@@ -41,7 +41,6 @@ import {
    useReaderChaptersStore,
    useReaderSettingsStore,
    useReaderStore,
-    useReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';

@@ -68,7 +67,6 @@ const BaseReader = ({
        tapZoneInvertMode,
        shouldShowReadingModePreview,
        shouldShowTapZoneLayoutPreview,
-        setSettings,
    } = useReaderSettingsStore((state) => ({
        shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
        shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
@@ -78,9 +76,7 @@ const BaseReader = ({
        tapZoneInvertMode: state.settings.tapZoneInvertMode,
        shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview,
        shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
-        setSettings: state.settings.setSettings,
    }));
-    const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);

    const scrollElementRef = useRef<HTMLDivElement | null>(null);

@@ -127,7 +123,6 @@ const BaseReader = ({
        defaultSettingsResponse,
        defaultSettings,
        defaultSettingsMetadata,
-        setSettings,
        setAreSettingsSet,
    );
    useReaderShowSettingPreviewOnChange(
@@ -139,7 +134,6 @@ const BaseReader = ({
        tapZoneInvertMode,
        shouldShowReadingModePreview,
        shouldShowTapZoneLayoutPreview,
-        setShowPreview,
    );
    useReaderSetChaptersState(
        chaptersResponse,
--- a/src/features/reader/services/ReaderControls.ts
+++ b/src/features/reader/services/ReaderControls.ts
@@ -36,7 +36,7 @@ import {
    isEndOfPageInViewport,
    isPageInViewport,
 } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { TapZoneRegionType, TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { TapZoneRegionType } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
 import { isContinuousReadingMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import {
@@ -100,7 +100,6 @@ export class ReaderControls {
        readingMode: ReadingMode,
        readingDirection: ReadingDirection,
        element: HTMLElement,
-        setShowPreview: TReaderTapZoneContext['setShowPreview'],
        scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
    ): void {
        if (!element) {
@@ -129,7 +128,7 @@ export class ReaderControls {
            currentPos + elementSize * scrollAmount * scrollDirection;

        getReaderOverlayStore().setIsVisible(false);
-        setShowPreview(false);
+        getReaderTapZoneStore().setShowPreview(false);

        const doScroll = (
            isAtStartForDirection: boolean,
@@ -432,14 +431,8 @@ export class ReaderControls {
        return useCallback(
            (pageIndex, debounceChapterUpdate = true, endReached = false) => {
                const { currentPageIndex, setCurrentPageIndex } = getReaderPagesStore();
-                const {
-                    currentChapter,
-                    chapters,
-                    previousChapter,
-                    nextChapter,
-                    visibleChapters,
-                    setReaderStateChapters,
-                } = getReaderChaptersStore();
+                const { currentChapter, chapters, previousChapter, nextChapter, visibleChapters } =
+                    getReaderChaptersStore();

                if (pageIndex === currentPageIndex && !endReached) {
                    return;
@@ -464,7 +457,6 @@ export class ReaderControls {
                    direction === DirectionOffset.NEXT ? nextChapter : previousChapter,
                    visibleChapters.lastLeadingChapterSourceOrder,
                    visibleChapters.lastTrailingChapterSourceOrder,
-                    setReaderStateChapters,
                    direction,
                );

@@ -581,7 +573,6 @@ export class ReaderControls {
                        readingMode.value,
                        readingDirection.value,
                        scrollElement,
-                        getReaderTapZoneStore().setShowPreview,
                        scrollAmount,
                    );
                } else {
--- a/src/features/reader/services/ReaderService.ts
+++ b/src/features/reader/services/ReaderService.ts
@@ -53,7 +53,6 @@ import {
    useReaderSettingsStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
-import { ReaderChaptersStoreSlice } from '@/features/reader/stores/ReaderChaptersStore.ts';
 import { getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';

 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
@@ -122,7 +121,6 @@ export class ReaderService {
        chapter: TChapterReader | undefined | null,
        lastLeadingChapterSourceOrder: number,
        lastTrailingChapterSourceOrder: number,
-        setReaderStateChapters: ReaderChaptersStoreSlice['chapters']['setReaderStateChapters'],
        direction: DirectionOffset,
    ): void {
        if (!chapter) {
@@ -140,7 +138,7 @@ export class ReaderService {
            return;
        }

-        setReaderStateChapters((state) =>
+        getReaderChaptersStore().setReaderStateChapters((state) =>
            updateReaderStateVisibleChapters(
                isPreviousChapter,
                state,
--- a/src/features/reader/settings/components/ReaderSettingsTabs.tsx
+++ b/src/features/reader/settings/components/ReaderSettingsTabs.tsx
@@ -23,7 +23,6 @@ import { ReaderBehaviourSettings } from '@/features/reader/settings/behaviour/Re
 import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';
 import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';

 const BaseReaderSettingsTabs = ({
    activeTab,
@@ -45,7 +44,6 @@ const BaseReaderSettingsTabs = ({
 }) => {
    const { t } = useLingui();
    const isTouchDevice = MediaQuery.useIsTouchDevice();
-    const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);

    return (
        <>
@@ -99,7 +97,6 @@ const BaseReaderSettingsTabs = ({
                                    <ReaderLayoutSettings
                                        settings={settings}
                                        updateSetting={(...args) => updateSetting(...args)}
-                                        setShowPreview={setShowPreview!}
                                        isDefaultable={!areDefaultSettings}
                                        onDefault={(...args) => deleteSetting?.(...args)}
                                        isSeriesMode
--- a/src/features/reader/settings/layout/ReaderLayoutSettings.tsx
+++ b/src/features/reader/settings/layout/ReaderLayoutSettings.tsx
@@ -20,11 +20,10 @@ import { ReaderSettingsTypeProps } from '@/features/reader/Reader.types.ts';
 import { ReaderSettingPageGap } from '@/features/reader/settings/layout/components/ReaderSettingPageGap.tsx';
 import { ReaderSettingWidth } from '@/features/reader/settings/layout/components/ReaderSettingWidth.tsx';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { getReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';

 export const ReaderLayoutSettings = ({
-    setShowPreview,
    settings,
    updateSetting,
    isDefaultable,
@@ -32,7 +31,6 @@ export const ReaderLayoutSettings = ({
    isSeriesMode,
    setTransparent,
 }: ReaderSettingsTypeProps & {
-    setShowPreview: TReaderTapZoneContext['setShowPreview'];
    isSeriesMode?: boolean;
 }) => {
    const { t } = useLingui();
@@ -67,24 +65,24 @@ export const ReaderLayoutSettings = ({
            <ReaderSettingTapZoneLayout
                tapZoneLayout={settings.tapZoneLayout}
                setTapZoneLayout={(value) => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                    updateSetting('tapZoneLayout', value);
                }}
                isDefaultable={isDefaultable}
                onDefault={() => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                    onDefault?.('tapZoneLayout');
                }}
            />
            <ReaderSettingTapZoneInvertMode
                tapZoneInvertMode={settings.tapZoneInvertMode}
                setTapZoneInvertMode={(value) => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                    updateSetting('tapZoneInvertMode', value);
                }}
                isDefaultable={isDefaultable}
                onDefault={() => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                    onDefault?.('tapZoneInvertMode');
                }}
            />
--- a/src/features/reader/settings/layout/components/ReaderSettingProfileSettings.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingProfileSettings.tsx
@@ -49,7 +49,6 @@ export const ReaderSettingProfileSettings = ({
            <Stack sx={{ px: Number(!isSeriesMode) * 2 }}>
                <ReaderLayoutSettings
                    {...props}
-                    setShowPreview={() => {}}
                    settings={adjustedSettings}
                    updateSetting={(setting, value, commit) => updateSetting(setting, value, commit, true, profile)}
                />
--- a/src/features/reader/viewer/ReaderChapterViewer.tsx
+++ b/src/features/reader/viewer/ReaderChapterViewer.tsx
@@ -44,21 +44,13 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 import { READER_DEFAULT_PAGES_STATE } from '@/features/reader/stores/ReaderPagesStore.ts';

-import { getReaderChaptersStore } from '@/features/reader/stores/ReaderStore.ts';
+import { getReaderChaptersStore, getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';

 const BaseReaderChapterViewer = ({
    currentPageIndex,
-    setPages: setContextPages,
-    setPageUrls: setContextPageUrls,
-    setPageSpreadStates: setContextPageSpreadStates,
-    setPageLoadStates: setContextPageLoadStates,
-    setTotalPages: setContextTotalPages,
-    setCurrentPageIndex: setContextCurrentPageIndex,
    updateCurrentPageIndex,
-    setPageToScrollToIndex,
    transitionPageMode,
    retryFailedPagesKeyPrefix,
-    setTransitionPageMode,
    readingMode,
    readerWidth,
    pageScaleMode,
@@ -89,20 +81,7 @@ const BaseReaderChapterViewer = ({
    minWidth,
    minHeight,
    scrollElement,
-}: Pick<
-    ReaderStatePages,
-    | 'currentPageIndex'
-    | 'setPages'
-    | 'setPageUrls'
-    | 'setPageSpreadStates'
-    | 'setPageLoadStates'
-    | 'setTotalPages'
-    | 'setCurrentPageIndex'
-    | 'setPageToScrollToIndex'
-    | 'transitionPageMode'
-    | 'retryFailedPagesKeyPrefix'
-    | 'setTransitionPageMode'
-> &
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'transitionPageMode' | 'retryFailedPagesKeyPrefix'> &
    Omit<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates' | 'handleAsInitialRender' | 'resumeMode'> &
    Pick<
        IReaderSettings,
@@ -205,14 +184,14 @@ const BaseReaderChapterViewer = ({
                actualPages,
                (value) => {
                    if (isCurrentChapterRef.current) {
-                        setContextPageSpreadStates(value);
+                        getReaderPagesStore().setPageSpreadStates(value);
                    }

                    setPagesToSpreadState(value);
                },
                (value) => {
                    if (isCurrentChapterRef.current) {
-                        setContextPageLoadStates(value);
+                        getReaderPagesStore().setPageLoadStates(value);
                    }

                    setPageLoadStates(value);
@@ -226,7 +205,7 @@ const BaseReaderChapterViewer = ({
        () =>
            createHandleReaderPageLoadError((value) => {
                if (isCurrentChapterRef.current) {
-                    setContextPageLoadStates(value);
+                    getReaderPagesStore().setPageLoadStates(value);
                }

                setPageLoadStates(value);
@@ -274,29 +253,35 @@ const BaseReaderChapterViewer = ({
        arePagesFetched,
        setArePagesFetched,
        (value) => updateState(value, noOp, getReaderChaptersStore().setReaderStateChapters),
-        (value) => updateState(value, setTotalPages, setContextTotalPages),
-        (value) => updateState(value, setPages, setContextPages),
-        (value) => updateState(value, setPageUrls, setContextPageUrls),
-        (value) => updateState(value, setPageLoadStates, setContextPageLoadStates),
-        (value) => updateState(value, setPagesToSpreadState, setContextPageSpreadStates),
-        (value) => updateState(value, noOp, setContextCurrentPageIndex),
+        (value) => updateState(value, setTotalPages, getReaderPagesStore().setTotalPages.bind(getReaderPagesStore())),
+        (value) => updateState(value, setPages, getReaderPagesStore().setPages.bind(getReaderPagesStore())),
+        (value) => updateState(value, setPageUrls, getReaderPagesStore().setPageUrls.bind(getReaderPagesStore())),
+        (value) =>
+            updateState(value, setPageLoadStates, getReaderPagesStore().setPageLoadStates.bind(getReaderPagesStore())),
+        (value) =>
+            updateState(
+                value,
+                setPagesToSpreadState,
+                getReaderPagesStore().setPageSpreadStates.bind(getReaderPagesStore()),
+            ),
+        (value) => updateState(value, noOp, getReaderPagesStore().setCurrentPageIndex.bind(getReaderPagesStore())),
        (value) => {
            if ((isInitialChapter && !arePagesFetched) || scrollIntoView) {
-                setPageToScrollToIndex(value);
+                getReaderPagesStore().setPageToScrollToIndex(value);
                getReaderChaptersStore().setReaderStateChapters((prevState) => ({
                    ...prevState,
                    visibleChapters: { ...prevState.visibleChapters, scrollIntoView: false, resumeMode: undefined },
                }));
            }
        },
-        (value) => updateState(value, noOp, setTransitionPageMode),
+        (value) => updateState(value, noOp, getReaderPagesStore().setTransitionPageMode.bind(getReaderPagesStore())),
    );

    useReaderConvertPagesForReadingMode(
        currentPageIndex,
        actualPages,
        pageUrls,
-        (value) => updateState(value, setPages, setContextPages, true),
+        (value) => updateState(value, setPages, getReaderPagesStore().setPages.bind(getReaderPagesStore()), true),
        (value) => updateState(value, setPagesToSpreadState, noOp, true),
        (value) => updateState(value, noOp, updateCurrentPageIndex),
        readingMode,
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -47,13 +47,12 @@ import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/

 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 import {
+    getReaderAutoScrollStore,
    getReaderStore,
-    useReaderAutoScrollStore,
    useReaderChaptersStore,
    useReaderOverlayStore,
    useReaderPagesStore,
    useReaderSettingsStore,
-    useReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';

 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
@@ -74,44 +73,21 @@ const BaseReaderViewer = ({
 }) => {
    const { direction: themeDirection } = useTheme();
    const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
-    const {
-        currentPageIndex,
-        pageToScrollToIndex,
-        setPageToScrollToIndex,
-        pages,
-        totalPages,
-        setPages,
-        setPageUrls,
-        setPageSpreadStates,
-        setPageLoadStates,
-        setTotalPages,
-        setCurrentPageIndex,
-        transitionPageMode,
-        retryFailedPagesKeyPrefix,
-        setTransitionPageMode,
-    } = useReaderPagesStore((state) => ({
-        currentPageIndex: state.pages.currentPageIndex,
-        pageToScrollToIndex: state.pages.pageToScrollToIndex,
-        setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
-        pages: state.pages.pages,
-        totalPages: state.pages.totalPages,
-        setPages: state.pages.setPages,
-        setPageUrls: state.pages.setPageUrls,
-        setPageSpreadStates: state.pages.setPageSpreadStates,
-        setPageLoadStates: state.pages.setPageLoadStates,
-        setTotalPages: state.pages.setTotalPages,
-        setCurrentPageIndex: state.pages.setCurrentPageIndex,
-        transitionPageMode: state.pages.transitionPageMode,
-        retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
-        setTransitionPageMode: state.pages.setTransitionPageMode,
-    }));
+    const { currentPageIndex, pageToScrollToIndex, pages, totalPages, transitionPageMode, retryFailedPagesKeyPrefix } =
+        useReaderPagesStore((state) => ({
+            currentPageIndex: state.pages.currentPageIndex,
+            pageToScrollToIndex: state.pages.pageToScrollToIndex,
+            pages: state.pages.pages,
+            totalPages: state.pages.totalPages,
+            transitionPageMode: state.pages.transitionPageMode,
+            retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
+        }));
    const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
        (state) => ({
            initialChapter: state.chapters.initialChapter,
            currentChapter: state.chapters.currentChapter,
            chapters: state.chapters.chapters,
            visibleChapters: state.chapters.visibleChapters,
-            setReaderStateChapters: state.chapters.setReaderStateChapters,
            isCurrentChapterReady: state.chapters.isCurrentChapterReady,
        }),
    );
@@ -138,10 +114,6 @@ const BaseReaderViewer = ({
        shouldStretchPage: state.settings.shouldStretchPage.value,
        isStaticNav: state.settings.isStaticNav,
    }));
-    const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({
-        showPreview: state.tapZone.showPreview,
-        setShowPreview: state.tapZone.setShowPreview,
-    }));
    const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
        resumeMode: ReaderResumeMode.START,
    };
@@ -153,13 +125,7 @@ const BaseReaderViewer = ({
    const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
    const isDragging = useMouseDragScroll(scrollElementRef);

-    const automaticScrolling = useReaderAutoScrollStore((state) => ({
-        isPaused: state.autoScroll.isPaused,
-        pause: state.autoScroll.pause,
-        resume: state.autoScroll.resume,
-        setScrollRef: state.autoScroll.setScrollRef,
-    }));
-    useEffect(() => automaticScrolling.setScrollRef(scrollElementRef.current), []);
+    useEffect(() => getReaderAutoScrollStore().setScrollRef(scrollElementRef.current), []);

    const scrollbarXSize = MediaQuery.useGetScrollbarSize('width', scrollElementRef.current);
    const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current);
@@ -240,7 +206,6 @@ const BaseReaderViewer = ({
        pageToScrollToIndex,
        pages,
        totalPages,
-        setPageToScrollToIndex,
        updateCurrentPageIndex,
        isContinuousReadingModeActive,
        imageRefs,
@@ -256,14 +221,8 @@ const BaseReaderViewer = ({
    );
    useReaderHideCursorOnInactivity(scrollElementRef);
    useReaderHorizontalModeRevampScrolling(readingMode, readingDirection, scrollElementRef);
-    useReaderHideOverlayOnUserScroll(isOverlayVisible, showPreview, setShowPreview, scrollElementRef);
-    useReaderAutoScroll(
-        isOverlayVisible,
-        automaticScrolling.isPaused,
-        automaticScrolling.pause,
-        automaticScrolling.resume,
-        isStaticNav,
-    );
+    useReaderHideOverlayOnUserScroll(isOverlayVisible, scrollElementRef);
+    useReaderAutoScroll(isOverlayVisible, isStaticNav);
    useReaderPreserveScrollPosition(
        scrollElementRef,
        currentChapter?.id,
@@ -273,7 +232,6 @@ const BaseReaderViewer = ({
        visibleChapters,
        readingMode,
        readingDirection,
-        setPageToScrollToIndex,
        pageScaleMode,
        shouldStretchPage,
        readerWidth,
@@ -381,13 +339,6 @@ const BaseReaderViewer = ({
                        isTrailingChapter={isTrailingChapter}
                        isPreloadMode={isPreloadMode}
                        imageRefs={imageRefs}
-                        setPages={setPages}
-                        setPageUrls={setPageUrls}
-                        setPageSpreadStates={setPageSpreadStates}
-                        setPageLoadStates={setPageLoadStates}
-                        setTotalPages={setTotalPages}
-                        setCurrentPageIndex={setCurrentPageIndex}
-                        setPageToScrollToIndex={setPageToScrollToIndex}
                        transitionPageMode={transitionPageMode}
                        retryFailedPagesKeyPrefix={retryFailedPagesKeyPrefix}
                        readingMode={readingMode}
@@ -405,7 +356,6 @@ const BaseReaderViewer = ({
                            visibleChapters.resumeMode,
                            resumeMode,
                        )}
-                        setTransitionPageMode={setTransitionPageMode}
                        pageGap={pageGap}
                        imagePreLoadAmount={imagePreLoadAmount}
                        customFilter={customFilter}
--- a/src/features/reader/viewer/hooks/useReaderHandlePageSelection.ts
+++ b/src/features/reader/viewer/hooks/useReaderHandlePageSelection.ts
@@ -12,12 +12,12 @@ import { ReaderStatePages, ReadingDirection } from '@/features/reader/Reader.typ
 import { getIndexOfPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getScrollIntoViewInlineOption } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
+import { getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';

 export const useReaderHandlePageSelection = (
    pageToScrollToIndex: ReaderStatePages['pageToScrollToIndex'],
    pages: ReaderStatePages['pages'],
    totalPages: number,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
    updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
    isContinuousReadingModeActive: boolean,
    imageRefs: MutableRefObject<(HTMLElement | null)[]>,
@@ -43,7 +43,7 @@ export const useReaderHandlePageSelection = (
        const newPageIndex = getIndexOfPage(pageToScrollTo);
        const isLastPage = newPageIndex === totalPages - 1;

-        setPageToScrollToIndex(null);
+        getReaderPagesStore().setPageToScrollToIndex(null);
        updateCurrentPageIndex(newPageIndex, !isLastPage, isLastPage);
    }, [pageToScrollToIndex]);
 };
--- a/src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts
+++ b/src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts
@@ -12,7 +12,6 @@ import {
    IReaderSettingsManga,
    ReaderPageScaleMode,
    ReaderStateChapters,
-    ReaderStatePages,
    ReadingDirection,
    ReadingMode,
 } from '@/features/reader/Reader.types.ts';
@@ -24,6 +23,7 @@ import {
 } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import { getPreviousNextChapterVisibility } from '@/features/reader/Reader.utils.ts';
 import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
+import { getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';

 const shouldPreserveOnResizeChange = (
    readingMode: ReadingMode,
@@ -47,22 +47,13 @@ const shouldPreserveOnResizeChange = (
    return handleWidthChange || handleHeightChange;
 };

-const usePreserveOnValueChange = (
-    value: unknown,
-    currentPageIndex: number,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
-) => {
+const usePreserveOnValueChange = (value: unknown, currentPageIndex: number) => {
    useLayoutEffect(() => {
-        setPageToScrollToIndex(currentPageIndex);
+        getReaderPagesStore().setPageToScrollToIndex(currentPageIndex);
    }, [value]);
 };

-const usePreserveOnWindowResize = (
-    readingMode: ReadingMode,
-    pageScaleMode: ReaderPageScaleMode,
-    setPageToScrollToIndex: (index: number | null) => void,
-    pageIndex: number,
-) => {
+const usePreserveOnWindowResize = (readingMode: ReadingMode, pageScaleMode: ReaderPageScaleMode, pageIndex: number) => {
    const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight });
    const isResizeInProgressRef = useRef(false);
    const activeResizeTimeoutRef = useRef<NodeJS.Timeout>(undefined);
@@ -81,7 +72,7 @@ const usePreserveOnWindowResize = (
            return;
        }

-        setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
+        getReaderPagesStore().setPageToScrollToIndex(pageIndexOnResizeStartRef.current);

        clearTimeout(activeResizeTimeoutRef.current);
        activeResizeTimeoutRef.current = setTimeout(() => {
@@ -357,7 +348,6 @@ export const useReaderPreserveScrollPosition = (
    visibleChapters: ReaderStateChapters['visibleChapters'],
    readingMode: ReadingMode,
    readingDirection: ReadingDirection,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
    pageScaleMode: ReaderPageScaleMode,
    shouldStretchPage: boolean,
    readerWidth: IReaderSettingsManga['readerWidth'],
@@ -372,10 +362,10 @@ export const useReaderPreserveScrollPosition = (
        isContinuousReadingMode(readingMode),
    );
    usePreserveOnLeadingPageRender(scrollElementRef, readingMode);
-    usePreserveOnWindowResize(readingMode, pageScaleMode, setPageToScrollToIndex, currentPageIndex);
-    usePreserveOnValueChange(readingDirection, currentPageIndex, setPageToScrollToIndex);
-    usePreserveOnValueChange(readingMode, currentPageIndex, setPageToScrollToIndex);
-    usePreserveOnValueChange(pageScaleMode, currentPageIndex, setPageToScrollToIndex);
-    usePreserveOnValueChange(shouldStretchPage, currentPageIndex, setPageToScrollToIndex);
-    usePreserveOnValueChange(`${readerWidth.value}_${readerWidth.enabled}`, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnWindowResize(readingMode, pageScaleMode, currentPageIndex);
+    usePreserveOnValueChange(readingDirection, currentPageIndex);
+    usePreserveOnValueChange(readingMode, currentPageIndex);
+    usePreserveOnValueChange(pageScaleMode, currentPageIndex);
+    usePreserveOnValueChange(shouldStretchPage, currentPageIndex);
+    usePreserveOnValueChange(`${readerWidth.value}_${readerWidth.enabled}`, currentPageIndex);
 };