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?
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 }
}
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>
);
}
}
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"
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?
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)