Unable to get redux store value outside react components (EISDIR: illegal operation on a directory)

Question

Here is my api store configuration file:

import {createStore, compose, applyMiddleware} from 'redux';
import {persistStore, persistCombineReducers} from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {createLogger} from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

import rootReducers from './reducers'; // where reducers is a object of reducers
import sagas from './sagas';

const config = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['authReducer'],
  debug: true, //to get useful logging
};

const middleware = [];
const sagaMiddleware = createSagaMiddleware();

middleware.push(sagaMiddleware);

if (__DEV__) {
  middleware.push(createLogger());
}

const reducers = persistCombineReducers(config, rootReducers);
const enhancers = [applyMiddleware(...middleware)];

const persistConfig = {enhancers};
const store = createStore(reducers, undefined, compose(...enhancers));
const persistor = persistStore(store, persistConfig, () => {
     // console.log('Test', store.getState());
});
const configureStore = () => {
  return {persistor, store};
};

sagaMiddleware.run(sagas);

export default configureStore;

When i try to get the store value outside, for example in an api config file, i am getting weird errors.

Here is how i accessed it:

// General api to access data
import ApiConstants from './ApiConstants';
import configureStore from '@/redux/store';
const {persistor, store} = configureStore();

const {token: accessToken} = store.getState().authReducer;
export default function api(path, params, method, token, contentType, extraHeaders) {
  let options;
  if (contentType && contentType == 'multipart/form-data') {
    options = {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
        device: 'mobile',
        Authorization: 'Bearer ' + accessToken,
      },
      method: method,
      ...(params && {body: JSON.stringify(params)}),
    };
    options.body = new FormData();
    for (let key in params) {
      options.body.append(key, params[key]);
    }
  } else {
    options = {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        device: 'mobile',
        Authorization: 'Bearer ' + accessToken,
        ...extraHeaders,
        // ...(token && {token: token}),
      },
      method: method,
      ...(params && {body: JSON.stringify(params)}),
    };
  }

  if (__DEV__) {
    console.log('HERE IN API', ApiConstants.BASE_URL + path, options);
  }
  return fetch(ApiConstants.BASE_URL + path, options)
    .then(resp => resp.json())
    .then(json => json)
    .catch(err => {
      if (__DEV__) {
        console.log('api error', err);
      }
    });
}

Error which i got:

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:592:3)
    at tryReadSync (fs.js:366:20)
    at Object.readFileSync (fs.js:403:19)
    at UnableToResolveError.buildCodeFrameMessage

Please help me resolve this issue, i am totally blind with this error as it guides me nowhere. Whenever the import code is removed, it works fine.

Answer 1

Export store from "store configuration file"

store configuration file:

export const store = createStore(reducers, undefined, compose(...enhancers));

File where you want to access it:

import configureStore, {store} from '@/redux/store';