Accessing redux store from outside component

Question

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).

Would you mind shading a little bit more light on what these "helpers" are supposed to do and in what context you would like to be using them? From my experience, most functionality that needs to have direct access to store can typically be expressed in a form of middleware, which basically solves all problems. But from your description, it's not clear if middleware would fit into the use case. — Tomasz Lenarcik
– Tomasz Lenarcik, Commented Oct 9, 2019 at 9:20

Dave Newton · Accepted Answer · 2019-10-08 16:25:13Z

1

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.

answered Oct 8, 2019 at 16:25

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter Monecke Over a year ago

But would this store be hydrated? (i.e. redux-persist would have not touched the store)

Dave Newton Over a year ago

@WalterMonecke I'm not sure I understand. You're creating the store in the function you export. There's nothing in your code that dictates it needs to be created in that function--that includes calling persistStore on it, which you can also do outside the function. I don't know why you're doing it as a function at all. In fact you call that function twice in your updated code, so you're not even getting the same store/persistor combination as it is.

Collectives™ on Stack Overflow

Accessing redux store from outside component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related