We have an API boolean setting that we want to cache after the initial call. To achieve this, I created an effect that sets the value when a new instance of appSettings (our application-wide settings) is added:
public checkCachedEffectg$ = createEffect(()=>
this.actions$.pipe(
ofType(addAppSettings),
withLatestFrom(
this.store.select(selectAppSettings),
(store)=> store
),
switchMap((currentState)=> {
if(currentState.isSettingPositiveSet){
return of(currentState);
}
return this.settingsService.isSettingPositive()
.pipe(map(res => {
currentState.isSettingPositiveSet = true;
currentState.isSettingPositive = res;
return currentState;
}
));
}),
map(state => {
return addAppSettingsSuccess(state);
}),
catchError(this.errorHandler.handleError)
The effect appears to be functioning correctly as it returns cached data if the value is already set and fetches it from the API if not. However, there seems to be an issue with updating the NGRX store. Despite having the new values in the returned state, subsequent calls to the state still retrieve the original AppSettings rather than the updated one.
Is my approach correct? Do I need to make an additional call to ensure that the state reflects the updated currentState property value?