Redux-persist: only initial state is rendered when opening the app

Created on 19 Apr 2018  路  2Comments  路  Source: rt2zz/redux-persist

I am having trouble making redux-persist work. Redux works fine, but when the app is closed the reducer only loads the initial state over again, and nothing seems to be stored. Am I missing something? Should I implement something special in the reducer to make redux-persist work?

configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import { AsyncStorage } from 'react-native'
import rootReducer from './reducers.js'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

const persistConfig = {
  key: 'root',
  stateReconciler: autoMergeLevel2,
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer, undefined);
  let persistor = persistStore(store);
  return { store, persistor }
}

App.js

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import { PersistGate } from 'redux-persist/integration/react'
import configureStore from './components/redux/configureStore.js';

const { store, persistor } = configureStore();

const AppNavigation = StackNavigator({
  Home: { screen: Home },
  ItemExpanded: { screen: ItemExpanded },
  Settings: { screen: Settings },
});

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator size="large" color="#0000ff" />}
          persistor={persistor}
          onBeforeLift={() => console.log('lifted')} >
          <AppNavigation />
        </PersistGate>
      </Provider>
    );
  }
}

Reducer.js

function initState() {
  return {
    dateLimit: 3,
    search: [],
    items: [
    {
        item: "Milk", itemInfo: [
        { storeName: "Rema", price: "30", date: "10.03.2018" },
        { storeName: "Kiwi", price: "25", date: "10.12.2017" },
        ]
    },
    ]
   };
}

function reducer(state = initState(), action) {
  switch (action.type) {
    case "ADD_ITEM": {
    let nextState = Object.assign({}, state)
    nextState.items.push(action.item);
    return nextState;
    }
    case "DELETE_ITEM": {
    let nextState = Object.assign({}, state)
    index = nextState.items.findIndex(items => items.item === action.item);
    nextState.items.splice(index, 1);
    return nextState;
    }
    default:
    return state;
  }
}
export default reducer;

I am using Expo and running it on Android.
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"redux-persist": "^5.9.1"

usability

Most helpful comment

React-native / AsyncStorage / "redux-persist": "^5.9.1",
I suppose I have the same issue.
It seems I had state persisted once and then I get the same copy every time app loaded.
For example, I've authorized with certain credentials(1) -> then logout -> authorized with certain credentials(2) -> close app -> open app again -> get logged in state with credentials(1)

All 2 comments

React-native / AsyncStorage / "redux-persist": "^5.9.1",
I suppose I have the same issue.
It seems I had state persisted once and then I get the same copy every time app loaded.
For example, I've authorized with certain credentials(1) -> then logout -> authorized with certain credentials(2) -> close app -> open app again -> get logged in state with credentials(1)

Hello, I come from the future and I present the same problem, could you solve it?

Was this page helpful?
0 / 5 - 0 ratings