Combining actions in a chain within an NgRx effect for Angular

Question

Combining actions in a chain within an NgRx effect for Angular

After successfully working on an effect, I now face the challenge of chaining it with a service called in a subsequent action after updating the state in the initial action through a reducer.

Here is the effect code:

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return
            new AppActions.UploadComplete(res),
            new AppActions.PerformCalc()
    })
);

I included the second action but am currently encountering an error related to Observables.

javascript angular typescript redux ngrx

Answer 1

Answer №1

If you wish to trigger multiple actions from an effect, you can return an array of actions and change your map to a mergeMap:

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    mergeMap((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return [
            new AppActions.UploadComplete(res),
            new AppActions.PerformCalc()
        ];
    })
);

However, if you want the PerformCalc action to be dispatched after the UploadComplete action is completed, you should make PerformCalc a side effect of UploadComplete:

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return new AppActions.UploadComplete(res);
    })
);

@Effect()
uploadComplete$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadComplete),
    map(() => new AppActions.PerformCalc())
);

Answer 2

If you wish to trigger multiple actions from an effect, you can return an array of actions and change your map to a mergeMap:

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    mergeMap((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return [
            new AppActions.UploadComplete(res),
            new AppActions.PerformCalc()
        ];
    })
);

However, if you want the PerformCalc action to be dispatched after the UploadComplete action is completed, you should make PerformCalc a side effect of UploadComplete:

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),
    switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f, 'load');
    }),
    map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return new AppActions.UploadComplete(res);
    })
);

@Effect()
uploadComplete$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadComplete),
    map(() => new AppActions.PerformCalc())
);

Answer 3

Answer №2

When dealing with multiple actions being returned in an @Effect,

it is important to utilize concatMap instead of map.

concatMap((result: any) => {
    const rawData = (<FileReader>result.target).result as string;
    const parsedData = JSON.parse(rawData);
    return [
        new AppActions.UploadComplete(parsedData),
        new AppActions.PerformCalculation()
    ]
})

Answer 4

When dealing with multiple actions being returned in an @Effect,

it is important to utilize concatMap instead of map.

concatMap((result: any) => {
    const rawData = (<FileReader>result.target).result as string;
    const parsedData = JSON.parse(rawData);
    return [
        new AppActions.UploadComplete(parsedData),
        new AppActions.PerformCalculation()
    ]
})

Answer 5

Answer №3

To achieve this functionality, you can utilize the switchMap and of operators as shown below:

@Effect()
dispatchMultiActions$: Observable<Action> = this.actions$.pipe(
    ofType<SomeAction.Dispatch>(someActions.Dispatch),
    switchMap(_ =>
        of(
            new someActions.InitializeData(),
            new someActions.FetchData(),
            new someActions.DisplayData()
        )
    )
);

Answer 6

To achieve this functionality, you can utilize the switchMap and of operators as shown below:

@Effect()
dispatchMultiActions$: Observable<Action> = this.actions$.pipe(
    ofType<SomeAction.Dispatch>(someActions.Dispatch),
    switchMap(_ =>
        of(
            new someActions.InitializeData(),
            new someActions.FetchData(),
            new someActions.DisplayData()
        )
    )
);

Combining actions in a chain within an NgRx effect for Angular

Answer №1

Answer №2

Answer №3

Similar questions

Is the && operator being utilized as a conditional statement?

What is the method for specifying a specific sub-dependency version in a package in Node.js?

What is the process for invoking a page using a JavaScript function?

Is there a way to manually stop a file upload (stream) using a XMLHttpRequest on the server?

Can VueJS 1 and 2 be integrated within the same package.json configuration?

Utilizing the $scope variable within an event in the Google Maps API

Determine the gravitational force of a planet on falling objects and display the result in an input field

Numerous pop-up windows displaying a variety of distinct content in each one

Guide to changing the color of SVG images on a live webpage

Switching positions in Azure DevOps (Angular + API): How can the Angular configuration be modified for the designated slot?

`Bootstrap 4 fails to center elements vertically`

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Can the browser doc mode be switched frequently?

What causes parameters to be undefined when making a DELETE request in my Next.js application running on version 14.1.4?

Record the cumulative amount computed using an asynchronous callback

Switch up the AJAX jQuery URL based on checkboxes selected

Check out the new Bootstrap 5 form when it's successfully validated

Tips for overcoming indentation issues using ESLint?

How can I use querySelector in JavaScript to target all div elements that have the same class?

Error encountered following the import from a newly created directory in Angular 2