I created a ngrx effect that's responsible for sending a POST request to a back end. now i want to change the implementation little bit. if the post request is successful I want to trigger another action that responsible update my ngrx store. but I couldn't figure out how to do that.
I tried to use switch map and merge map but didn't work.
creatTour$ = createEffect(() =>
this.actions$.pipe(
ofType(TourAction.createTour),
mergeMap((action) => {
const payload = action.tour;
const endpoint = environment.urls.tour.replace("{tourProviderId}", "1");
const request = new ServiceRequest(endpoint, 'POST', payload, options);
return this.requestHandlerService.invoke(request).pipe(
map((sucessResponce) => {
if (sucessResponce.code === 200) {
TourListAction.updateTourList({ tour: [tour] }) // i want to trigger this action and
// below action
}
return TourAction.createTourSucess({ responce: sucessResponce.message })
}),
catchError(err => {
const errorMessage = JSON.stringify(err);
console.log(errorMessage);
return of(TourAction.createTourFail({ errorMessage }))
})
)
})
)
);
i tried this way too
return [TourAction.createTourSucess({ responce: sucessResponce.message }
TourListAction.updateTourList({ tour: [tour] })]
it throws this error
Property 'type' is missing in type '(({ responce: string; }
& TypedAction<"[Tour] Create Tour Success">) | ({ tour: Tours[]; } &
TypedAction<"[Tour List] Tour List Update">))[]' but required in type
'Action'.
is this the better way to do this.i saw there is new thing called entity should I use that for this implementation?
Why not update your state on the createTourSucess action?
You can also return multiple actions:
.pipe(
switchMap(() =>
return [
TourListAction.updateTourList({ tour: [tour] }) ,
TourAction.createTourSucess({ responce: sucessResponce.message })
]
)
)
https://medium.com/#amcdnl/dispatching-multiple-actions-from-ngrx-effects-c1447ceb6b22
You can return multiple actions from your effect, they will all be dispatched.
See https://medium.com/#tanya/understanding-ngrx-effects-and-the-action-stream-1a74996a0c1c
For your code:
return successResponse.code === 200 ? [
createTourUpdateAction(tour),
TourAction.createTourSuccess
] : [TourAction.createTourSuccess]
Related
I'm using next js 13 along with Jest and react-testing-library for testing. I have a page with a form that i'm trying to test. I'm using react-hook-form.
export default function FormPage() {
const [isSuccess, setIsSuccess] = useState()
const submitForm: SubmitHandler<T> = async (data) => {
// call an api route here to send data to db
if (response.status == 200) setIsSuccess(true)
else setIsSuccess(false)
}
return (
<>
<form onSubmit={handleSubmit(submitForm)}>
// inputs here
</form>
{isSuccess ? <SuccessAlert /> : <Error />}
</>
)
}
I want to check if the success alert appears after the form is successfully submitted. I could mock the global.fetch but my problem is that there are two fetch happening in this page. A location input is also making fetch calls to give location suggestions to the user as they type. So when I mock global.fetch for the location input, it appears that it's also replacing the fetch call inside the submitForm function, hence, submitting the form doesn't really do anything.
Here's how I mocked the global.fetch for the location input:
describe("Form" , () => {
beforeEach(() => {
render(<FormPage/>)
global.fetch = jest.fn(() =>
Promise.resolve({
status: () => 200,
json: () =>
Promise.resolve({
data: { suggestions: SAMPLE_LOCATION_SUGGESTIONS },
}),
})
) as jest.Mock;
})
it("should show success alert after successfully submitting form", async () => {
await act(() => // fill up the form)
fireEvent.click(Submitbutton)
expect(scree.getByTestId("success-alert")).toBeInThisDocument()
})
})
Running screen.debug() just before the assertion shows that there are no errors appearing upon submission so the form is already valid. But it appears that calling the api for form submission does not happen at all. I'm guessing it's because of my initial mocking of fetch in beforeEach(). But i'm not sure how should should I mock 2 fetch inside a component.
we have Google Assistance project, that is working fine, for every intent,
now i want to get dynamic data from web service and return, for that, I am using request module, but its giving error
the final response did not set
below is my code
app.intent('doctor_list', (conv, {doctor}) => {
Request.get("url", (error, response, body) => {
if(error) {
con.ask('data return')
}
con.ask('err')
});
})
You aren't clear in what your Request object is, but I suspect the problem is that you're not returning a Promise object from your call. Network calls are handled asynchronously in node.js, and when you make an async call, you need to return a Promise object.
The easiest way to handle this is using the request-promise-native package. Your code might look something like this:
const Request = require('request-promise-native');
app.intent('doctor_list', (conv,{doctor}) => {
return Request.get('url')
.then( body => {
conv.ask( 'data return' );
})
.catch( err => {
console.log( err );
conv.close( 'error' );
});
});
I don't know my question title is suitable for this question.
I would like to use returned value of someAsync1 (same as v2) as argument of action1 inside of flatMap.
const anEpic = ($action: ActionsObservable<MyAction>, store: Store<MyRootStore>) => {
return $action.ofType(ActionTypes.AN_ASYNC_ACTION)
.switchMap((v1) => someAsync1(v1))
.switchMap((v2) => someAsync2(v2))
.map((v) => applyToUI(v))
.flatMap((v) => Observable.concat(Observable.of(action1(v)), Observable.of(action2(true)))) //
}
I guess I can use that value by injecting v2 to returned value of someAsync2. But that code looks disgusting.
What is clever way to do this with redux-observable?
switchMap technically means, well, switch to another Observable stream. That means there is no way for you to retain the value because your observer is now observing a different source.
There are a few ways to do the so called "retaining" the values from one stream to another, depending on which one you prefer.
1. Behaviour Subject
This is the most preferred way, because the purpose of BehaviourSubject is to retain a value of an Observable:
//initialize a BehaviourSubject
let v2BSubject = new BehaviourSubject<any>(null);
const anEpic = ($action: ActionsObservable<MyAction>, store: Store<MyRootStore>) => {
return $action.ofType(ActionTypes.AN_ASYNC_ACTION)
.switchMap((v1) => someAsync1(v1))
.switchMap((v2) => {
//store your v2 value here!
v2BSubject.next(v2);
return someAsync2(v2)
})
.map((v) => applyToUI(v))
.flatMap((v) => {
//get your v2 values here
let v2Value = v2BSubject.value;
return Observable.concat(Observable.of(action1(v)), Observable.of(action2(true)))
}) //
}
or you can use it as an Observable. That way you can treat it as an observable and use whatever rxjs operator can provide:
.flatMap((v) => {
return Observable.concat(Observable.of(action1(v)), v2BSubject.asObservable())
})
2. Use .map to propagate the value.
This is rather hacky, but gets the job done. However do note it's modifying the stream source. If you have many operations along the pipe, it may blow up quickly and hard to manage:
const anEpic = ($action: ActionsObservable<MyAction>, store: Store<MyRootStore>) => {
return $action.ofType(ActionTypes.AN_ASYNC_ACTION)
.switchMap((v1) => someAsync1(v1))
.switchMap((v2) => {
someAsync2(v2)
.map(afterSomeAsync2 => {
return {
v1Value: v2,
v2Value: afterSomeAsync2
}
})
})
.map(({v1Value, v2Value}) => {
return applyToUI(v1Value).map(v1 => {
return {
v1Value: v1,
v2Value: v2Value
}
})
})
.flatMap(({v1Value, v2Value}) => {
return Observable.concat(Observable.of(action1(v1Value)), Observable.of(v2Value))
})
The easiest solution is to apply your operators directly on the returned inner Observables instead of on the collapsed outer chain. You can then access the values emitted because they're part of the closures.
That's probably confusing, but hopefully this code makes it clear:
const anEpic = ($action: ActionsObservable<MyAction>, store: Store<MyRootStore>) => {
return $action.ofType(ActionTypes.AN_ASYNC_ACTION)
.switchMap((v1) =>
someAsync1(v1)
.switchMap((v2) =>
someAsync2(v2)
.map((v) => applyToUI(v))
.flatMap((v) => Observable.of(action1(v, v1, v2), action2(true))
)
)
}
This pattern is also what you would have to use if you wanted to catch any errors by someAsync1 or someAsync2 because if you let the error propagate to the top-level chain the epic will have stopped listening for future actions.
e.g. if your epic looks like this:
const somethingEpic = (action$, store) => {
return action$.ofType(SOMETHING)
.switchMap(action => someAsync1(v1))
.map(() => ({ type: SOMETHING_FULFILLED }))
.catch(error => Observable.of({
type: SOMETHING_REJECTED,
error
}));
}
When the error reaches the catch operator it's too late, your epic is no longer listening for future actions. You could "restart" it, but this can have unexpected consequences so its best to avoid this pattern.
Instead, catch the error before it propagates out
const somethingEpic = (action$, store) => {
return action$.ofType(SOMETHING)
.switchMap(action =>
someAsync1(v1)
.map(() => ({ type: SOMETHING_FULFILLED }))
.catch(error => Observable.of({
type: SOMETHING_REJECTED,
error
}))
);
}
Some people refer to this as "isolating your observer chains".
Also notice how I didn't need to use concat with multiple of because of supports any number of arguments.
I'm dispatching an action when a form is submitted, so then checkPasswd is reached:
public checkPasswd():void {
this.store$.dispatch({ type: 'USER_REDUCER_USER_LOGIN', payload: { username: this.form.value.mail, password: this.form.value.passwd } });
}
on ngOnInit - constructor I've created this subscription to Store<IStore>:
private user$: Observable<IUser>;
private userSub: Subscription;
constructor(private store$: Store<IStore>)
{
this.user$ = this.store$.select(state => state.user).filter(user => user.id != null);
}
ngOnInit():void {
this.userSub = this.user$.subscribe(
(user: IUser) => {
this.router.navigate(['/app']); (((2)))
},
(error: any) => {
this.addAlert(error.message); (((1)))
}
);
}
I'm checking that (((1))) is reached when an error occurs. Nevertheless, it's never reached when an error appears.
I'm using efffects:
#Effect({ dispatch: true })
userLogin$: Observable<Action> = this._actions$
.ofType('USER_REDUCER_USER_LOGIN')
.switchMap((action: Action) =>
this._userService.checkPasswd(action.payload.username, action.payload.password)
.map((user: any) => {
return { type: 'USER_REDUCER_USER_LOGIN_SUCCESS', payload: user };
})
.catch((err) => {
return Observable.of({ type: 'USER_REDUCER_USER_LOGIN_FAILED', payload: { error: err } });
})
);
As you can see, in my effect I'm trying to call to my service, and if it gets an error I'm returning Observable.of({ type: 'USER_REDUCER_USER_LOGIN_FAILED', payload: { error: err } });.
So, after that, this reducer is called and reached:
public static USER_LOGIN_FAILED = `${UserReducer.reducerName}_USER_LOGIN_FAILED`;
private static userLoginFailed(sourcesRdx, type, payload) {
return Object.assign(<IUser>{}, sourcesRdx, payload);
}
Nevertheless, (((1))) is not reached, neither (((2))). So, the call stack seems to not reach my subscription...
Any ideas?
First: your select filters out any emission that do not contain a user-id, which I assume would be the case when a login fails - this means that absolutely no data will be emitted beyond this point unless there is a valid user with an id in the store.
this.user$ = this.store$.select(state => state.user).filter(user => user.id != null);
Second: The store.select will never emit any errors, since it is a perpetual stream - if errors where emitted, that would break the stream (this is one of the RxJS core-principles: Errors will stop and finalize a stream).
So the behavior seems to be expected to me.
How to handle this? - If you are looking to persist errors in your ngrx-store, then you would have to implement a field for that and add a select to get errors and display them - if you do not want to go through the store, you could add an error-alert-handler to the effect directly.
Also have a look at the ngrx-example-app for best-practices: https://github.com/ngrx/example-app
I have a component which first need to call a service that POST something. Then in the same component I want to wait until the POST is done, to call another service which GETs data.
How can I make the GET call wait for the POST call to finish?
In new-version.component.ts:
private createNewVersion(value) {
...
// create new version, then call on all available versions
// POST call
this._newVersionService.createNewVersion(vnr);
// GET call
this._versionService.getAvailableVersions();
...
}
In new-version.service.ts:
export class NewVersionService {
response$: Subject<any>;
constructor(private _http: Http) {
this.response$ = new BehaviorSubject<any>(null);
}
public createNewVersion(versionNr) {
this._http.post('http://localhost:8080/services/' + versionNr, null, {
method: 'POST',
})
.subscribe(response => {
this.response$.next(response.status);
},
error => console.error(error));
}
Thanks!
When a call returns a Promise chain the calls with
someFunction() {
return returnsPromise()
.then(result => doSomethingNext())
.then(result => doSomethingAfterThat());
}
Ensure you have a return that returns the Promise of that chain so the caller of someFunc() also has a chance to time additional work to execute after doSomethingAfterThat() is completed.
When a call returns an Observable then use the complete callback
someFunction() {
return returnsObservable()
.subscribe(
event => doForEachEvent(),
error => handleError(),
() => doSomethingNext()
.then(result => doSomethingAfterThat());
}
doSomethingNext() is executed after the last event and doSomethingAfterThat() is again chained with then() to show how to mix observable and promise. doSomething().
You should be able to concat to achieve sequence, and reduce to collect the emitted values:
var a = this._newVersionService.createNewVersion(vnr);
var b = this._versionService.getAvailableVersions();
Rx.Observable.concat(a, b).reduce((acc:Array<any>, x:any) => {
acc.push(x); return acc;
}, []).subscribe(t=> {
var firstEmitted = t[0];
var secondEmitted = t[1];
});
You can do like this:
Change createNewVersion to:
public createNewVersion(versionNr) {
return this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
method: 'POST',
});
}
Then in your call:
this._newVersionService.createNewVersion(vnr).subscribe(response=> {
this._versionService.getAvailableVersions();
}, error => console.error(error));
Another way to do the same is to subscribe in the new-version.component.ts and call you GET request from within the POST request i.e check whether your POST request is done Correctly or not
if yes POST is done Properly then call you GET request. As below:
In new-version.component.ts:
private createNewVersion(value) {
...
// create new version, then call on all available versions
// POST call
this._newVersionService.createNewVersion(vnr)
.subscribe((res) => {
if(res){
console.log(res);
if (---Post request done properly check via status or something else here----{
CALL YOUR GET REQUEST HERE.....
// GET call
this._versionService.getAvailableVersions();
}
else {
DO something else whatever you want....
}
}
});
...
}
In new-version.service.ts:
export class NewVersionService {
response$: Subject<any>;
constructor(private _http: Http) {
this.response$ = new BehaviorSubject<any>(null);
}
public createNewVersion(versionNr) {
this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
method: 'POST',
})
.map(response => {
return [{status: response.status, json: response.json()}];
},
error => console.error(error));
}
for more info related to http request you can read here.
Better use switchMap() here.
const versions$ = this._newVersionService.createNewVersion(vnr)
.switchMap(response => this._versionService.getAvailableVersions());
versions$.subscribe(response2 => this.versions = response2)
But the problem will be if you make another POST request before first has been resolved, the previous request will get cancelled.