How can I persist React-native redux state using redux-persist?

Question

I've been trying to use redux-perist to save my redux-state to AsyncStorage. Although I keep getting an error:

_this.store.getState is not a function

I'm not sure why this is happening?

Here is my setup:

configureStore.js:

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

App.js:

Here is where I connect my store, to my <provider>:

import React from 'react';
import {AsyncStorage} from 'react-native';
import { Provider, connect } from 'react-redux';
import { Router } from 'react-native-router-flux';
import routes from '@routes/app';
import createStore from './redux/create'; // Returns store object from the above configureStore.js!
import {persistStore} from 'redux-persist'
const RouterWithRedux = connect()(Router);

const store = persistStore(createStore(), {storage: AsyncStorage}); // Not working??
const Kernel = () => (
  <Provider store={store}>
    <RouterWithRedux scenes={routes} />
  </Provider>
);

export default Kernel;

persistStorage takes a callback which is triggered when it's done, I'm not sure, but perhaps that might be the problem. Here is a working example: pastebin.com/EKXeiYyg — martinarroyo
– martinarroyo, Commented May 5, 2016 at 9:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

const RouterWithRedux = connect()(Router);
const store = createStore();
const persistor = persistStore(store, {storage: AsyncStorage}); // Not working??
const Kernel = () => (
  <Provider store={store} persistor={persistor}>
    <RouterWithRedux scenes={routes} />
  </Provider>
);

The problem was I had to pass down a persistor field as well as the store field.

After adding in the persistor field, my store was being persisted into AsyncStorage

EDIT:

This worked at the time - It has occured to me that this not the correct solution to the problem. But I'm still getting responses that it still works, if someone could provide another answer for everyone else, that'd be great.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 5, 2016 at 11:51

James111

16k17 gold badges89 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Preetam Over a year ago

why is this not a recommended way for react-native in redux-persist docs? I was getting "Cannot read property 'subscribe' of undefined" error, this ans fixed the problem. thanks!

James111 Over a year ago

I'm actually not sure @Preetam but it did fix it for me

chg Over a year ago

How does this fix the problem? I don't even see a property persistor on the Provider component. github.com/reactjs/react-redux/blob/master/src/components/…

Priyesh Kumar Over a year ago

Wow, it works, but why persistor props on Provider when it is not a property on Provider component?

poikkeus Over a year ago

Provider.propTypes = { store: storeShape.isRequired, children: PropTypes.element.isRequired }

|

Collectives™ on Stack Overflow

How can I persist React-native redux state using redux-persist?

configureStore.js:

App.js:

1 Answer 1

EDIT:

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

configureStore.js:

App.js:

1 Answer 1

EDIT:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related