Cannot read property 'subscribe' of undefined- Redux Persist

Question

The more specific error I am getting is this : Warning: Failed prop type: The prop store is marked as required in Provider, but its value is undefined.

store.js

const initialState = {};

const storage = createSensitiveStorage({
  keychainService: "myKeychain",
  sharedPreferencesName: "mySharedPrefs"
});

const config = {
  key: "root",
  storage,
};

const middleware = [thunk];

const reducer = persistCombineReducers(config, rootReducer);

export default () => {
  let store = createStore(
    reducer,
    initialState,
    compose(applyMiddleware(...middleware))
  );
  let persistor = persistStore(store);

  return { store, persistor }
}

index.js for reducer:

export default combineReducers({
    profile: profileReducer,
    auth: authReducer,
    photoSlider,
    trip: tripReducer,
    moment: momentReducer
})

App.js:

import {store, persistor} from './src/store';

<Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Layout />
        </PersistGate>
      </Provider>

Any help would be greatly appreciated.

Answer 1

In store.js, you don't export store and persistor, you export a function that returns an object with a store and persistor. So your import statement in App.js actually imports two named imports that don't exist.

You can get your instances like this:

import factory from './src/store';

const {store, persistor} = factory();

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
     <Layout />
  </PersistGate>
</Provider>