Redux-persist: Is react-redux required to use with redux-persist?

Created on 23 Jan 2018  路  7Comments  路  Source: rt2zz/redux-persist

Hi there. I'm using React-native and Redux, but my app is very small and simple, so I thought that redux-react isn't necessary overhead and didn't use it. I just import store whenever I need because it is a singleton anyways. But now with redux-persist I'm getting an error "TypeError: undefined is not an object (evaluating 'this.props.persistor.subscribe')", so I guess it might be because I don't use store Provider. Is it true?

configureStore.js

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers/reducer';

const persistConfig = {
    key: 'root',
    storage: storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

let store = createStore(persistedReducer);
let persistor = persistStore(store);

export default { store, persistor };

App.js

import React from 'react';
import RootContainer from './src/components/containers/root-container';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { persistor } from './src/configureStore';

export default class App extends React.Component {
  render() {
    return (
      <PersistGate loading={null} persistor={persistor}>
        <RootContainer />
      </PersistGate>
    );
  }
}

Thanks for help

Most helpful comment

Thanks @sadi304
my solution:

App.js

import configureStore from './store';
const { persistor, store } = configureStore();

All 7 comments

did you resolve the issue?

react-redux is definitely not required. Hopefully you got it worked out!

Yes, I did! It was an issue on my side. Thank you!

@Hamabama can you tell me what was the solution? i am facing similar problem here.

@Hamabama what was the solution?

I have same issue, this is my code:

configStore.js:

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { AsyncStorage } from 'react-native';
import reducers from '../reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['likedJobs'],
};

const persistedReducer = persistReducer(persistConfig, reducers);

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

App.js

return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <View style={styles.container}>
            <MainNavigator />
          </View>
        </PersistGate>
      </Provider>
    );

see #734 . you will find the solution there

Thanks @sadi304
my solution:

App.js

import configureStore from './store';
const { persistor, store } = configureStore();
Was this page helpful?
0 / 5 - 0 ratings

Related issues

benmvp picture benmvp  路  3Comments

umairfarooq44 picture umairfarooq44  路  3Comments

ejbp picture ejbp  路  3Comments

Clumsy-Coder picture Clumsy-Coder  路  3Comments

scic picture scic  路  3Comments