Unable to save value to AsyncStorage - React Native

[njoshi94]

I am working with redux-persist and am trying to save a value (text) to AsyncStorage, but it is not working. I've confirmed with the debugger that the value isn't updating in AsyncStorage and can also confirm that the value is being updated in the store correctly and REHYDRATE is working correctly. I am also using React-Native-Navigation, if that is relevant.

reducer:

import {SET_TEXT} from '../types/types'
import { REHYDRATE } from 'redux-persist';
import { persistReducer } from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage';

const INITIAL_STATE = {
    text: 'hi'
}

const persistConfig = {
    key: 'pref',
    storage: AsyncStorage,
    keyPrefix: ''
  }

const prefScreen = (state = INITIAL_STATE, action ) => {
    switch(action.type){
        case REHYDRATE:
            console.log(action.payload)
            return { ...state, text: action.payload.text}
        case SET_TEXT:
            return { ...state, text: action.payload};
        default:
            return state;
    }
}

export default persistReducer(persistConfig,prefScreen);

combined reducers:

import {combineReducers} from 'redux';
import prefScreen from './PrefScreen_reducer';

const reducers = combineReducers({
    pref: prefScreen
});

export default reducers;

store:

import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './reducers';
import thunkMiddleware from 'redux-thunk'
import { persistReducer } from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

export default function configStore() {
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    stateReconciler: autoMergeLevel2
  }

  const composeEnhanser = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

  const persistedReducer = persistReducer(persistConfig, reducers)

  const store = createStore(
    persistedReducer,
    composeEnhanser(applyMiddleware(thunkMiddleware)) 
  );

  return store  
};

persistor:

import configStore from './store'
import { persistStore } from 'redux-persist'

export default function makePeristor() {
    const store = configStore()
    const persistor = persistStore(store)
    return persistor
}

[thegitparticle]

Hi, did you figure this out?

[njoshi94]

@thegitparticle I was not able to figure it out.

[Summys]

store:

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

export default function configStore() {
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    stateReconciler: autoMergeLevel2
}

  const composeEnhanser = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

  const persistedReducer = persistReducer(persistConfig, reducers)

  const store = createStore(
    persistedReducer,
    composeEnhanser(applyMiddleware(thunkMiddleware)) 
  );
  const persistor = persistStore(store)
  return { store, persistor }  
};

Use it as

const { store, persistor } = configStore()
And pass this variables to your components in App.js . Haven't tested but should work

[thegitparticle]

For anyone looking this, my issue was solved when I used different persistConfig functions for each of the item I was trying to store - each with different key - not 'root'. The problem was the store is over-writing different data onto of each other, so the Reducers which store data last before closing the app persist while the rest are lost. Solution - assign separate key value for each of item you are aiming to save/persist.

[njoshi94]

Thanks to everyone who contributed! Using the advice from people in the comments, I was able to get it to work!

[shamxeed]

@njoshi94 can you please share how you achieve that? thanks!!!

[EricWiener]

@njoshi94 could you please share the changes you made

[EricWiener]

@thegitparticle could you explain a bit more what you mean by having a different persistConfig function for each item?

[thegitparticle]

@EricWiener In this above example code, a persistConfig object has been created and used for the one reducer given.

If you have more than one reducers, when you create a new persistConfig object for each of them, change the key to be something unique instead of being 'root' for all of them.

This has worked in my case. let me know if you need more clairty