Problem z funkcjonowaniem aplikacji po dodadaniu redux-persist -nie chce czytać stanu.

Cześć, jestem w trakcie dodawania redux-persist do moich apek. Przed dodaniem:

const rootReducer = combineReducers({ books: booksReducer });
export const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(saga).concat(thunk),
});

const AppProvider: React.FC = ({ children }) => {
    return (
        <Provider store={store}>
            <FiltersVisibilityContextProvider>
                <Router basename={process.env.PUBLIC_URL}>{children}</Router>
            </FiltersVisibilityContextProvider>
        </Provider>
    );
};

saga.run(rootSaga);

serviceWorker.register();
export default AppProvider;
export type RootStateType = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Po dodaniu:

const persistConfig = {
    key: 'root',
    storage,
};
const saga = createSagaMiddleware();
const rootReducer = combineReducers({ books: booksReducer });
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
    reducer: persistedReducer,
    middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
        })
            .concat(saga)
            .concat(thunk),
});

let persistor = persistStore(store);

const AppProvider: React.FC = ({ children }) => {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <FiltersVisibilityContextProvider>
                    <Router basename={process.env.PUBLIC_URL}>{children}</Router>
                </FiltersVisibilityContextProvider>
            </PersistGate>
        </Provider>
    );
};
saga.run(rootSaga);

serviceWorker.register();
export default AppProvider;
export type RootStateType = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Użycie providera:

ReactDOM.render(
    <AppProvider>
        <App />
    </AppProvider>,

    document.getElementById('root'),
);

Problem polega przede wszystkim an tym, ze apka ma problemy z czytaniem store w komponentach. Jedno i drugie jak poniżej zwraca pustą tablice podczas gdy normalnie zwracało tablice tablic z obiektami

const mapStateToProps = (state: RootStateType) => ({
    pageContent: state.books.currentPageBooksData,
});

const pageC = useTypedSelector(state => state.books.currentPageBooksData, shallowEqual);

Natomiast po bezpośrednim zaimportowaniu store

store.getState().books.currentPageBooksData, ;

zwraca to co powinno.
Poza tym coś dziwnego dzieje się z routingiem. W zasadzie działa, ale w apce mam funkcjonalność chowania ulubionych książek do localstorage. I to działa z jednym, ale - po tej zmianie tworzy się inny klucz-wygląda jakby był tworzony nie na stronie pokazującej książki tylko na stronie łączenia z API (w kluczu jest zapisywana aktualna podstrona)
Mam drugą prostsza apkę, gdzie po zastosowaniu takich samych zmian wszystko działa poprawnie. Różence; w tamtej nie ma routera i nie ma sag ani thunków. I działa.
Pytanie dlaczego ta nie działa. Czy może persistGate powinien być między samą apką a routerem?

Próbowałaś w tych dwóch funkcjach zrobić jakiegoś prostego console.loga, żeby sprawdzić jak wygląda cały store po wszystkich zmianach przez middlewary?

const pageC = useTypedSelector(state => { 
  console.log(state);

  return state.books.currentPageBooksData;
}, shallowEqual); // <-- tutaj jeszcze można spróbować bez shallowEqual

i coś podobnego w mapStateToProps

const mapStateToProps = (state: RootStateType) => {
    console.log(state);

    return {
      pageContent: state.books.currentPageBooksData,
    };
};

@Xarviel: W pierwszym przypadku (PageC) zwraca obiekt zawierający

_persist: Object { version: 1, rehydrated: true }

oraz obiekt books w którym jest **początkowy **stan. Usunięcie shallowCompare nic nie zmienia

W przypadku mapStateToProps to samo.

A jak wygląda bezpośrednio plik reducera, który importujesz?

Tutaj na stackoverflow znalazłem podobny problem i rozwiązaniem był zły return w pliku
https://stackoverflow.com/questions/67244076/redux-persist-is-returning-initial-state-instead-of-persisting

.addDefaultCase((state, action) => {
            
        });