CODEWITHSUNDEEP
reactjsreact-nativereduxredux-persist
Annie Hill
Annie Hill

Reputation: 379

Redux store accessed outside of a component returns initial state

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

Upvotes: 4

Views: 1310

Answers (2)

Martin
Martin

Reputation: 303

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

Upvotes: 0

Ishan Trivid
Ishan Trivid

Reputation: 101

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());

Upvotes: 1

Related Questions