I am using redux-persist & async storage to persist data in my react-native-application.
here are configuration of my redux store
import AsyncStorage from '@react-native-community/async-storage';
import {applyMiddleware, createStore} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import {persistReducer, persistStore} from 'redux-persist';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas';
const sagaMiddleware = createSagaMiddleware();
// Middleware: Redux Persist Config
const persistConfig = {
// Root
key: 'root',
// Storage Method (React Native)
storage: AsyncStorage,
// Whitelist (Save Specific Reducers)
whitelist: ['authReducer',],
// Blacklist (Don't Save Specific Reducers)
blacklist: [''],
};
// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
// Redux: Store
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(sagaMiddleware)),
);
sagaMiddleware.run(rootSaga);
// Middleware: Redux Persist Persister
let persistor = persistStore(store);
// Exports
export {store, persistor};
when i make request to server, i use three type of action dispatch like
LOGIN_REQUEST
LOGIN_SUCCESS
LOGIN_FAILURE
and dispatch action on request LOGIN_REQUEST ( set loading state to true for loading animation & disable login button ), on successful request LOGIN_SUCCESS action is dispatch and LOGIN_FAILURE when request fails (and set loading state to false) here are the reducers
...
case LOGIN_SUCCESS: {
return {
...state,
user: action.payload,
loading : false
};
}
case LOGIN_REQUEST: {
return {
...state,
loading: true,
};
}
case LOGIN_FAILURE: {
return {
...state,
loading: false,
};
}
...
loading animations works good this way.
Problem comes if app closes while request is in progress, and loading state is still true because no LOGIN_FAILURE OR LOGIN_SUCCESS action is dispatched,
next time when app opens there is loading state true and loading animations appears
i looked into some solution like update state on auto dispatched action on start persist/REHYDRATE like
...
case "persist/REHYDRATE": {
return {
...state,
loading : false
};
}
...
OR
blacklist state like reducerName.loading like
...
storage: AsyncStorage,
// Whitelist (Save Specific Reducers)
whitelist: ['authReducer',],
// Blacklist (Don't Save Specific Reducers)
blacklist: ['authReducer.loading'],
...
is there any better way to tackle this situation thanks