While using NGRX with Nativescript Angular to manage state and fetch data from the server, I've encountered an issue when suspending the app on IOS. Whenever the app is in the middle of fetching data from the server and gets suspended, the entire process halts and loses all its states. Upon resuming the app, no data is returned. Is there any way to handle this situation?
The process follows these steps:
In component.ts (calling NGRX action to load data) -> actions.ts (triggering Effect to load data) -> effects.ts (calling service to load data from server, which gets cancelled if the app is suspended and resumed during this process)
component.ts
this.store.dispatch(new DataActions.LoadData(this.pageNumber));
action.ts
export class LoadData implements Action {
readonly type = ActionTypes.LoadData;
constructor(
public pageNumber: number) {
console.log('load more data action'); //This message is displayed in the log
}
}
effect.ts
@Effect()
loadData$: Observable<Action> = this.actions$.pipe(
ofType<DataActions.LoadData>(
DataActions.ActionTypes.LoadData
),
mergeMap((action: DataActions.LoadData) =>
this.dataService.getData(action.pageNumber).pipe(
map((data: any) => {
console.log(data.result); //This message is not displayed in the log when the app is suspended
return new DataActions.LoadDataSuccess(data.result);
}),
catchError(err => of(new DataActions.LoadDataFailed(err)))
)
)
);
dataService.service.ts
getData(pageNumber: number): Observable<PaginatedResult<Data[]>> {
const paginatedResult: PaginatedResult<Data[]> = new PaginatedResult<Data[]>();
let queryString = '?';
if (pageNumber != null) {
queryString += 'pageNumber=' + pageNumber ;
}
return this.http
.get(this.baseUrl + queryString, {observe: 'response'})
.pipe(
map((response: any) => {
paginatedResult.result = response.body;
console.log(paginatedResult.result); //This message is not displayed in the log if the app is suspended
return paginatedResult;
})
);