CODEWITHSUNDEEP
redux
Walter Monecke
Walter Monecke

Reputation: 2558

Accessing redux store from outside component

How would I go about accessing my redux-store in a helpers.js file (basically a file full of functions that help derive/manipulate certain data that DEPEND ON THE STORE)?

The thing is I can't just do import store from './mystore' because of the way I am exporting it in my configureStore.js:

export default () => {
  let store = createStore(persistedReducer, {}, applyMiddleware(ReduxThunk));
  let persistor = persistStore(store);
  return { store, persistor };
}

then I import this in my App.js into a PersistGate to wait for the store to get rehydrated:

import React, { Component } from 'react';
import Router               from './Router';
import { Provider }         from 'react-redux';
import configureStore       from './configureStore';
import { PersistGate }      from 'redux-persist/integration/react';

export default class App extends Component {
  render() {
    return (
      <Provider store={configureStore().store}>
        <PersistGate loading={null} persistor={configureStore().persistor}>
          <Router />
        </PersistGate>
      </Provider>
    );
  }
}

This is why the app has access to the store through props, but I have no idea how to access this hydrated state without a React.Component.

If I import this and call store.getState() I get a new store (i.e. a new store with the initial state and not the actual persisted store that contains the local data).

Upvotes: 0

Views: 469

Answers (1)

Dave Newton
Dave Newton

Reputation: 160170

Since all you export is a function that creates a new store you can't.

Without context (e.g., there might be a reason you're doing this, although I can't fathom what it is) just create the store outside the default exported function.

You can still export the function as default, and store as a named export.

Upvotes: 1

Related Questions