CODEWITHSUNDEEP
reactjsreact-nativeredux
James111
James111

Reputation: 15903

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

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;

Upvotes: 5

Views: 8746

Answers (1)

James111
James111

Reputation: 15903

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.

Upvotes: 5

Related Questions