How to persist redux store in React Native with redux-persist

0
votes

I am using react-native with redux-persist and I cannot seem to get my store to persist into async storage. According to the redux-persist github repo, this may have to do with AsyncStorage being removed from react-native, but I cannot seem to figure out what needs to be done to fix the issue.

When my app launches I see the actions persist/PERSIST and persist/REHYDRATE fire in my redux devtools, but nothing ever is stored in async storage.

I thought I had set up my file as the redux-persist docs explained but I imagine I am missing something. I'm fairly new to Redux as it is so I may just be confused on something basic.

My Redux.config.js file ... 

import React from 'react';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';
import { initialState } from './initialState';
import { puppyReducer } from './reducers/puppies/puppyReducer';
import { uiReducer } from './reducers/ui/uiReducer';
import { userReducer } from './reducers/user/userReducer';
import { contentReducer } from './reducers/content/contentReducer';
import { persistStore, persistReducer, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/lib/storage'
import logger from 'redux-logger';
import Navigation from './Navigation.config';
import { PersistGate } from 'redux-persist/integration/react';

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

const rootReducer = {
    dogs: puppyReducer,
    ui: uiReducer,
    user: userReducer,
    content: contentReducer
};

const reducer = persistCombineReducers(persistConfig, rootReducer);

const persistedReducer = persistReducer(persistConfig, reducer);

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(persistedReducer, initialState, composeEnhancers(applyMiddleware(thunk), applyMiddleware(logger)));

const persistor = persistStore(store);

// Wrap the redux State Provider around the Main Navigation Stack
function StateWrapper() {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Navigation />
            </PersistGate>
        </Provider >
    )
}

export default App = StateWrapper;

I expect that this should load my persisted state when the app launches, and continue to update that persisted state as my redux state changes. As it stands currently, my state is updating fine, but nothing is persisted. There are no error messages showing.

3
react-nativereduxreact-reduxredux-persist

3 Answers

1
votes

I persist my redux store using AsyncStorage. Rather than using redux-persist's storage option, I have installed AsyncStorage from the @react-native-community. Just make sure that you link the dependency properly.

Then in my config.js file I import and use AsyncStorage as follows. 

import AsyncStorage from '@react-native-community/async-storage';

const config = {
  key: 'primary',
  keyPrefix: '', // the redux-persist default `persist:` doesn't work with some file systems
  storage: AsyncStorage,
};

Your issue could also be related to the keyPrefix try setting it to some value other than the default.

0
votes

Try the following:

const reducer = persistCombineReducers(persistConfig, rootReducer);

const persistedReducer = persistReducer(persistConfig, reducer rootReducer);

0
votes

This works for me:

  //...
import {combineReducers} from 'redux';
import {persistReducer} from 'redux-persist';
const persistConfig = {
    key: 'root',
    storage: storage
}

const rootReducer = {
    dogs: puppyReducer,
    ui: uiReducer,
    user: userReducer,
    content: contentReducer
};
const persistedReducer = persistReducer(
  persistConfig,
  combineReducers(rootReducers)
);
//...