Redux store accessed outside of a component returns initial state

Question

I would like to know if what I'm trying to achieve is doable and if yes, then I would like to find out what I'm doing wrong. I'm using a react-native-threads library to create a separate "thread". Inside there should be some setInterval function that checks the current state of the app, say every 20 seconds. Now inside that thread, I was trying to do something similar to what was described in the best answer for this question: What is the best way to access redux store outside a react component? However, I'm using redux-persist so I don't have a plain 'store' variable inside the store config file. Code for store setup:

    const rootReducer = combineReducers({
    appState: appStateReducer,
    entries: entriesReducer,
    listHelper: listHelperReducer,
    authenticate: authenticateReducer
})

const persistConfig = {
    key: 'root',
    storage,
    stateReconciler: autoMergeLevel2,
    blacklist: [ 'appState' , 'listHelper'],
    whitelist: ['authenticate' , 'entries']

}
const pr = persistReducer(persistConfig, rootReducer)
const configureStore = () => {
    const store = createStore(pr,  devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8082 }))

    const persistor = persistStore(store)
    return { persistor, store }
}
export default configureStore

I have tried importing the configureStore from that file and accessing the state like this inside the index.thread.js:

console.tron.log(configureStore().store.getState());

However, this is returning the initial state. I need the current state, after rehydration. Has anyone tried to solve a similar issue? I will be very grateful for any hints. Thank you.

Edit: Here is the index.js file where the configureStore is called.

const store = configureStore();
const RNRedux = () => (
  <Provider store={store.store}>
    <PersistGate loading={<LoadingScreen />} persistor={store.persistor}>
      <App />
    </PersistGate>
  </Provider>
);


AppRegistry.registerComponent("ProjectName", () => RNRedux);

You are creating a new store every time you call `configureStore()`, hence the default values `configureStore()`. — Niekert, Sep 17 '18 at 14:27
Yeah I assumed this. How can I access the actual store that has already been created? The configureStore() is called inside my index.js but I cannot put any export there without crashing the app — Annie Hill, Sep 17 '18 at 14:31
Maybe instead of exporting a function called `configureStore` you can run the code insight that function directly on the module level and export `store` and `persistor` directly. — Niekert, Sep 17 '18 at 14:59

score 1 · Answer 1 · answered Sep 17 '18 at 15:12

1

You can call the createStore in your store file and export it from there.

const pr = persistReducer(persistConfig, rootReducer);
const store = createStore(pr,  devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8082 }))
const configureStore = () => {
    const persistor = persistStore(store)
    return { persistor, store }
}

export default configureStore

Now you can use the store like below.

console.tron.log(configureStore.store.getState());

answered Sep 17 '18 at 15:12

Ishan Trivid

101
3

Unfortunately when I do it like you have described above I'm getting this error: undefined is not an object (evaluating '_configureStore2.default.configureStore.store) Then, if I call it like this: configureStore().store.getState() it returns initial state again. Or if I import it like this: {configureStore} im getting same error as mentioned above but sligtly different (_configureStore.configureStore.store) – Annie Hill Sep 20 '18 at 08:09
I have tried it like this: `const pr = persistReducer(persistConfig, rootReducer) export const store = createStore(pr, devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8082 })) export const persistor = persistStore(store, null, () => { console.log('state', store.getState()); });` But I was still getting a new instance of the store – Annie Hill Sep 20 '18 at 09:20

score 0 · Answer 2 · answered Sep 25 '19 at 14:08

0

I found out that my issue was circular dependencies between files. That left some variables uninitialised so I would recommend double checking that.

answered Sep 25 '19 at 14:08

Martin

303
5
14

Redux store accessed outside of a component returns initial state

2 Answers2