Accessing Redux Store outside of React Component returns initial Values

Question

In a React Redux app based on the Keftaa/expo-redux-boilerplate boilerplate that uses redux-persist, how can we access the persisted Redux store from a non-React component?

Problem: I am not sure how we can access/export the store that is returned by configureStore() because configureStore() is passed a setState() function, and more importantly it is stored in the Setup component's state and not exported:

/src/boot/setup.js

export default class Setup extends Component {

    this.state = {
      isLoading: false,
      store: configureStore(() => this.setState({ isLoading: false })),
      isReady: false
    };

    ...


  render() {
    if (!this.state.isReady || this.state.isLoading) {
      return <Expo.AppLoading />;
    }
    return (
        <Provider store={this.state.store}>
          <App />
        </Provider>
    );
  }
}

/src/boot/configureStore.js

import { AsyncStorage } from "react-native";
import devTools from "remote-redux-devtools";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";
import devToolsEnhancer from 'remote-redux-devtools';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

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

const persistedReducer = persistReducer(persistConfig, reducer);

export default function configureStore(onCompletion: () => void): any {
  const enhancer = compose(
    applyMiddleware(thunk),
    devTools({
      name: "MyApp",
      realtime: true
    })
  );

  let store = createStore(persistedReducer, enhancer);
  let persistor = persistStore(store, null, onCompletion);

  return store;
}

Failed Attempt

Returns a store with only its initialValues. I believe this is because we are creating a new redux store instead of importing the original one from setup.js.

My /src/lib/utils.js

import configureStore from "../boot/configureStore";

const state = configureStore
console.log(state);  // returns only the initial value for the store

Using

• react@16.8.3
• redux@4.0.4
• react-redux@7.1.0
• redux-persist@5.10.0

Answer 1

You could export a store accessor function from the Setup component, something like:

let store = null;

export function getStore() {
  return store;
}

export default class Setup extends Component {
    constructor(props) {
      super(props);
      store = configureStore(() => this.setState({ isLoading: false })),
      this.state = {
        isLoading: false,
        store,
        isReady: false
      };
}

Then call getStore() from elsewhere and check to make sure it is not null before calling store.getState();