_this.store.getState is not a function

[jamesone]

I'm having trouble setting up redux-persist. I keep getting an error - _this.store.getState is not a function

I have no idea why it's not working, I also found that their weren't any examples! If I get this running I'll try put up an example for other users.

This is my configureStore.js file

import {AsyncStorage,} from 'react-native';
import { createStore, applyMiddleware, compose, combineReducers, } from 'redux';
import reduxThunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron';
import * as reducers from './modules';
import devTools from 'remote-redux-devtools';
import {persistStore, autoRehydrate} from 'redux-persist'


Reactotron.connect({
  enabled: __DEV__,
});

const enhancer = compose(
  autoRehydrate(),
  applyMiddleware(
    reduxThunkMiddleware,
    Reactotron.reduxMiddleware,
  ),
  devTools()
);

export default function configureStore(initialState) {
  const store = createStore(
    combineReducers({
      ...reducers,
    }),
    initialState,
    enhancer,
  );
  Reactotron.addReduxStore(store, {storage: AsyncStorage});
  return store;
}

And here is where I'm passing the store down to the <provider> component

import createStore from './redux/configureStore';
import {persistStore} from 'redux-persist'
const store = persistStore(createStore(), {storage: AsyncStorage});


const RouterWithRedux = connect()(Router);
const Kernel = () => (
  <Provider store={store}>

Also a question I have:

Is it possible for me to only persist an array of reducers? I've got about 10 reducers, and I'd only like to persist 2 or 3 of them to AsyncStorage?

[rt2zz]

1. the return value from persistStore is persistor not store. So your code should look more like:

import createStore from './redux/configureStore'
import {persistStore} from 'redux-persist'
const store = createStore()
const persistor =  persistStore(store, {storage: AsyncStorage})

1. You can pass in a whitelist of reducer keys like so:
   const persistor = persistStore(store, {storage: AsyncStorage, whitelist: ['reducerA', 'reducerB']})

[jamesone]

Great! Would I pass down the store as well as the persistor object to my provider? So basically the persistor object would only persist the keys you put in the whitelist array? @rt2zz

 <Provider store={store} persistor={persistor}>

[jamesone]

One more thing, Is it possible to pass a persisted store down to my child the <Provider component?

The following store={store} is just parsing down my default reducer, instead of the persisted one?

<Provider persistor={persistor} store={store}>
    <Routes store={store} /> // This will parse down my default store
  </Provider>

[rt2zz]

no need to pass persistor to provider. I would recommend reading up more on how react-redux works. Basically if you want access to state you use should using connect. redux-persist will not affect anything about react-redux.