I'm trying to remove the deprecated NgRx #Effect annotation but I hit a problem with Nrwl DataPersistence. How do I convert the #Effect to the new createEffect method while using the Nrwl DataPersistence?
For example:
#Effect()
retrieveWorker$ = this.dataPersistence.fetch(
WorkerActionTypes.RETRIEVE_WORKER,
{
run: (action: RetrieveWorkerAction, state: WorkerPartialState) => {
return this.workerService.getWorker(action.payload).pipe(
filter(x => !!x),
map(worker => new RetrieveWorkerSuccessAction(worker)
);
}
}
);
Related
For the life of me, I can't figure out why once and error is thrown and intercepted, the effect will not work anymore
#Effect()
register$ = createEffect(() => {
return this.actions$.pipe(
ofType(RegisterAction),
map(action => action.registrationInfo),
mergeMap(registrationInfo => {
return this.authService.createUser(registrationInfo.email, registrationInfo.password,
registrationInfo.lastname, registrationInfo.firstname);
}),
map(credentialInfo => ProfileInitAction({credentialInfo})),
catchError(error => [ProfileInitErrorAction(error)]),
);
});
You know why? Because this is the normal workflow in RXJS. So an observable emits values at different times. When an error occurs, then the observable chain (or pipe or subscription, or what you want) breaks. You have a service call. This service call can fail, right? But you do this service call in a child observable chain. So you can handle the error in this child's observable chain, and this will not break your main observable chain. In one word, do the catchError in the mergeMap.
For example:
import { Injectable } from '#angular/core';
import { Actions, createEffect, ofType } from '#ngrx/effects';
import { EMPTY } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { MoviesService } from './movies.service';
#Injectable()
export class MovieEffects {
loadMovies$ = createEffect(() => this.actions$.pipe(
ofType('[Movies Page] Load Movies'),
mergeMap(() => this.moviesService.getAll() //< --- starting point of the child observable chain
.pipe(
map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
catchError(() => EMPTY) // <--- this is runs in the child observable chain
))
) // <--- end of the child observable chain
); // <--- end of the main observable chain
constructor(
private actions$: Actions,
private moviesService: MoviesService
) {}
}
Adding caught$ in the catchError seems to fix this.
register$ = createEffect(() => {
return this.actions$.pipe(
ofType(RegisterAction),
map(action => action.registrationInfo),
mergeMap(registrationInfo => {
return this.authService.createUser(registrationInfo.email, registrationInfo.password,
registrationInfo.lastname, registrationInfo.firstname);
}),
map(credentialInfo => ProfileInitAction({credentialInfo})),
catchError((err, caught$) => {
notify(this.translate.instant('pages.auth.register.notify.error' + ': ' + err['message']), 'error');
return caught$;
}),
);
});
I am developing using an angular app using ngrx. I have defined the convention below to implement a loading indicator:
Initially state of each entity is set to null
Make it an empty object on effect starts
Fill it with fetched data on effect done
Now one of my effects will be this:
#Effect()
LoginUser$ = this._actions$.pipe(
ofType<LoginUser>(EUserActions.LoginUser),
switchMap((params) => { new LoginUserSuccess(<IUser>{}); return of(params); }), // for loading indicator to be shown
switchMap((params) => this._userService.loginUser(params.payload)),
switchMap((currentUser: IUser) => of(new LoginUserSuccess(currentUser)))
)
but the reducer call in the first switchMap does not get occur. What is the problem.
An effect is a stream, only the last Action in the stream will be dispatched.
For your case you can listen on LoginUser in your reducer and empty your state.
I have finally solved my problem some other way. I now am dispatching another action, inside the primary action to update the state. For example this is how I have done it:
user.service.ts
export class UserService {
constructor(private _store: Store<IAppState>) { }
loginUser(model): void {
this._store.dispatch(new AddBusy(EUserActions.LoginUser));
this._store.dispatch(new LoginUser(model));
}
getAllUsers(): void {
this._store.dispatch(new AddBusy(EUserActions.GetAllUsers));
this._store.dispatch(new GetAllUsers());
}
}
user.actions.ts
export class UserEffects {
#Effect()
LoginUser$ = this._actions$.pipe(
ofType<LoginUser>(EUserActions.LoginUser),
switchMap((params) => this._userLogic.loginUser(params.payload)),
switchMap((currentUser: IUser) => { this._store.dispatch(new RemoveBusy(EUserActions.LoginUser)); return of(currentUser); }),
switchMap((currentUser: IUser) => of(new LoginUserSuccess(currentUser)))
)
#Effect()
getAllUsers$ = this._actions$.pipe(
ofType<GetAllUsers>(EUserActions.GetAllUsers),
switchMap(() => this._userLogic.getAllUsers()),
switchMap((users: IUser[]) => { this._store.dispatch(new RemoveBusy(EUserActions.GetAllUsers)); return of(users); }),
switchMap((users: IUser[]) => of(new GetAllUsersSuccess(users)))
)
constructor(
private _userLogic: UserLogic,
private _actions$: Actions,
private _store: Store<IAppState>,
) { }
}
This solved my problem nice.
Error: Actions must be plain objects. Use custom middleware for async actions.
On all set of actions returned from epics we get this error.
it could be due to how epics are set up in the epics creator:
const epic = (action$, store) =>
action$.ofType(String(key)).mergeMap(action => func(action, store))
either the mappings are not correct here or more probably they are not correct in the epics.
Example of one epic called by func(action, store):
[String(usersActions.updateUser)]: (action, store) => {
return authFetch(`${API_ROOT}/user/${get(action, 'payload.id')}`, {
method: 'put',
headers: {
...
},
body: ...,
})
.then(resJson => {
if (resJson['status'] === 200) {
return [
appActions.pushNotification('success', USER_UPDATE_SUCCESS),
appActions.setNextPath(`/users/${get(action, 'payload.id')}`),
]
} else
return [
appActions.pushNotification(
'error',
USER_UPDATE_FAILED + ': ' + resJson['message']
),
]
})
.catch(() => {
return [appActions.pushNotification('error', USER_UPDATE_FAILED)]
})
},
It works correctly if the square parenthesis are not there, tried with this suggestion too:
[String(usersActions.updateUser)]: (action, store) => {
return Rx.Observable.fromPromise(
fetch(`${API_ROOT}/user/${get(action, 'payload.id')}`, {
method: 'put',
headers: {},
}).then(res => res.json())
)
.mergeMap(resJson => {
if (resJson['status'] === 200) {
return Rx.Observable.concat(
Rx.Observable.of(
appActions.pushNotification('success', USER_UPDATE_SUCCESS)
),
Rx.Observable.of(
appActions.setNextPath(`/users/${get(action, 'payload.id')}`)
)
)
} else return
Rx.Observable.concat(
Rx.Observable.of(
appActions.pushNotification(
'error',
USER_UPDATE_FAILED + ': ' + resJson['message']
)
)
)
})
.catch(() => {
Rx.Observable.concat(
Rx.Observable.of(
appActions.pushNotification('error', USER_UPDATE_FAILED)
)
)
})
},
it removes the error but the actions dispatched are now duplicated.
Already tried will all the options out there so hopefully it's not a repeated question.
You can add a .do(action => console.log(action)) to the end of your epic to see what value(s) you're emitting and why they are not actions. e.g. if it's an array of actions, that's incorrect. Epics should only ever emit plain old javascript actions with a type property.
I'm stuck trying to accomplish the following. In my React app, I am using redux-observable Epics.
I have two promises, one which needs to wait for the second, before it fires.
import { map, mergeMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { fromPromise } from 'rxjs/observable/fromPromise';
.....
const promise1 = Auth.getCredentials().then( credentials => {
return credentials
}
const promise2 = ( credentials ) => {
return doQuery(credentials, someData).then(function(data) {
// return success
}).catch(function(err) {
// reject error
});
}
So promise 2 needs the credentials from promise1, I am having a hard time knowing how to use observable/fromPromise etc to 'chaing' these items together so that the result of ends up either in the 'map' or 'catchError' result
In my Epic, i have something like this:
const searchEpic: Epic<RootAction, RootState> =
(action$, store) => action$.ofType(DO_QUERY)
.mergeMap(({payload}) => {
???????? - this is where Im stuck
const $stream = RESULT_OF_PROMISES.pipe(
map((response) => {
return actionCreators.success(..)
},
catchError(e => {
return of(actionCreators.failure(..));
}
)));
return $stream
});
Thank you!
I am using redux-observable with redux for async actions. Inside epic's map operator i am doing some pre processing because its the central place.
My app calling same action from multiple container components with different values.
So basically i have to cancel my ajax request/next operator execution if deepEqual(oldAtts, newAtts) is true
code -
export default function getProducts(action$, store) {
return action$.ofType(FETCH_PRODUCTS_REQUEST)
.debounceTime(500)
.map(function(action) {
let oldAtts = store.getState().catalog.filterAtts
let newAtts = Object.assign({}, oldAtts, action.atts)
if (deepEqual(oldAtts, newAtts)) {
// Don't do new ajax request
}
const searchString = queryString.stringify(newAtts, {
arrayFormat: 'bracket'
})
// Push new state
pushState(newAtts)
// Return new `action` object with new key `searchString` to call API
return Object.assign({}, action, {
searchString
})
})
.mergeMap(action =>
ajax.get(`/products?${action.searchString}`)
.map(response => doFetchProductsFulfilled(response))
.catch(error => Observable.of({
type: FETCH_PRODUCTS_FAILURE,
payload: error.xhr.response,
error: true
}))
.takeUntil(action$.ofType(FETCH_PRODUCTS_CANCEL))
);
}
Not sure whether its right way to do it from epic.
Thanks in advance.
You can do this:
export default function getProducts(action$, store) {
return action$.ofType(FETCH_PRODUCTS_REQUEST)
.debounceTime(500)
.map(action => ({
oldAtts: store.getState().catalog.filterAtts,
newAtts: Object.assign({}, oldAtts, action.atts)
}))
.filter(({ oldAtts, newAtts }) => !deepEqual(oldAtts, newAtts))
.do(({ newAtts }) => pushState(newAtts))
.map(({ newAtts }) => queryString.stringify(newAtts, {
arrayFormat: 'bracket'
}))
.mergeMap(searchString => ...);
}
But most likely you do not need to save the atts to state to do the comparison:
export default function getProducts(action$, store) {
return action$.ofType(FETCH_PRODUCTS_REQUEST)
.debounceTime(500)
.map(action => action.atts)
.distinctUntilChanged(deepEqual)
.map(atts => queryString.stringify(atts, { arrayFormat: 'bracket' }))
.mergeMap(searchString => ...);
}