What is the recommended approach for implementing if/else logic in ngrx/effects?

Question

What is the recommended approach for implementing if/else logic in ngrx/effects?

In my project, I am utilizing ngrx/effects. The goal is to dispatch different actions depending on the value of a foo state in the store.

This is my current approach:

@Effect() foo1$ = this.updates$
    .whenAction(Actions.FOO)
    .filter(obj => !obj.state.product.foo)
    .map<string>(toPayload)
    .map(x => ({ type: Actions.BAR1, payload: { x }}));

@Effect() foo2$ = this.updates$
    .whenAction(Actions.FOO)
    .filter(obj => obj.state.product.foo)
    .map<string>(toPayload)
    .map(x => ({ type: Actions.BAR2, payload: { x }}));

Is there a way to utilize RxJS 5 operators such as partition, groupBy, if, case following the example in this post? For some reason, I am having trouble implementing them effectively at the moment.

angular typescript ngrx

Answer 1

Answer №1

It is perfectly acceptable to have two separate sources for effects. Alternatively, you can simplify it as follows:

@Effect() bar$ = this.changes$
    .whenEvent(Events.BAR)
    .map(({event, state}) => {
        if (state.product.bar) {
            return { type: Events.CHAT_SEND_MESSAGES2, payload: { event.payload }};
        } else {
            return { type: Events.CHAT_SEND_MESSAGES, payload: { event.payload }};
        }
    });

Answer 2

It is perfectly acceptable to have two separate sources for effects. Alternatively, you can simplify it as follows:

@Effect() bar$ = this.changes$
    .whenEvent(Events.BAR)
    .map(({event, state}) => {
        if (state.product.bar) {
            return { type: Events.CHAT_SEND_MESSAGES2, payload: { event.payload }};
        } else {
            return { type: Events.CHAT_SEND_MESSAGES, payload: { event.payload }};
        }
    });

What is the recommended approach for implementing if/else logic in ngrx/effects?

Answer №1

Similar questions

Transmitting information from a modal component to its parent component in Angular using MDB

What triggers the execution of the catch method while chaining HTTP promises?

Are AngularJS Material Components compatible with Angular2?

Sharing Angular classes and components between a shell and Micro Frontends using module federation

What strategies can I use to steer clear of the pyramid of doom when using chains in fp-ts?

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Searching in an empty array using Typescript and the includes method

When using Vue with Vuetify, be aware that object literals can only specify known properties. In this case, the type 'vuetify' does not exist in the ComponentOptions of Vue with DefaultData

Dealing with the possibility of an empty array when accessing elements by index in Typescript

Ways to integrate object-or-array with recursion in Typescript

Tips for creating a nodeCategoryProperty function for a TypeScript Model:

The error seems to vanish when commenting out the following div structure

User interface for dynamically generated elements using Typescript with React

Struggling to update minimist in Angular 9?

Can you explain the distinction between angular-highcharts and highcharts-angular?

Error message: Angular 2 JsonpModule import not defined

What is the best way to incorporate master/detail components without relying on hierarchical routes?

Angular 5 - Issue with ngModel not binding correctly to tinymce editor

Analyzing bundle files with Angular CLI output

How can I retrieve the access token from the Id_token using Azure AD Authentication Library (ADAL in angular 5)?