How to access react-redux store outside react component in redux-toolkit?

Question

I am trying to access redux-store in my helper function. My store looks like code below:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import counterReducer from 'app/Components/Counter/counterSlice';
import languageReducer from 'redux/features/app_language/language.slice';
import loginReducer, {
    currentUserReducer,
    currentUserIdReducer,
} from 'redux/features/app_login/loginSlice';
import rootSaga from 'redux/sagas';
import emailEditorReducer from 'redux/features/email_editor';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const configureCustomStore = () => {
    const sagaMiddleware = createSagaMiddleware();

    const persistConfig = {
        key: 'root',
        storage,
    };

    const rootReducer = combineReducers({
        counter: counterReducer,
        app_language: languageReducer,
        isAuthenticated: loginReducer,
        currentUser: currentUserReducer,
        currentUserId: currentUserIdReducer,
        emailEditor: emailEditorReducer,
    });

    const persistedReducer = persistReducer(persistConfig, rootReducer);

    const store = configureStore({
        reducer: persistedReducer,
        middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
                serializableCheck: false,
            }).concat(sagaMiddleware),
    });

    const persistor = persistStore(store);
    sagaMiddleware.run(rootSaga);
    return { store, persistor };
};
export default configureCustomStore();

export const { store, persistor } = configureCustomStore();
console.log(store.getState(), 'State');

As you can see in the last two lines of code i am trying to console.log the state and i am getting the state as expected. But when i am importing the store in my helper function i am getting undefined. Here is how i am doing it

import storeSaga from 'redux/store/store';
const { store } = storeSaga;

Error i am getting is:

TypeError: Cannot destructure property 'store' of 'redux_store_store__WEBPACK_IMPORTED_MODULE_1__.default' as it is undefined.

I was searching for the solution i end up to this who got almost same issue, the answer is also mentioned in the next comment but honestly i didn't understand it.

I may have done something wrong in order of imports i tried all the ways i could. For the reference you can have a look on my index.js file below:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next';
import * as serviceWorker from './serviceWorker';
import i18n from './_helpers/utils/i18n';
import storeSaga from 'redux/store/store';
const { store, persistor } = storeSaga;
import App from './app/Pages/App/App';

import { PersistGate } from 'redux-persist/integration/react';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <I18nextProvider i18n={i18n}>
                    <App />
                </I18nextProvider>
            </PersistGate>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
);

serviceWorker.unregister();

I appreciate your help so much. Thanks in advance.

Answer 1

In

export default configureCustomStore(); 
export const { store, persistor } = configureCustomStore();

you are creating two independent stores.

Also, when importing you import the first of them and call it storeSaga even though this has nothing to do with a saga at all.

Kick the default export out and do import { store } from 'redux/store/store'; everywhere. That makes it much clearer what you are doing.

If you still have errors after that, you have a circular import somewhere that you need to resolve, meaning that this file imports from a file that also imports this file (maybe with a third file in-between), forming a circle. JavaScript cannot work with that.