Merge effects into a single NgRx store

Question

Merge effects into a single NgRx store

I am trying to merge similar effects into one, but I'm not sure how to do it.

Below are the effects I have (I need to pass different id depending on the action type):

setTopics$ = createEffect(
  () => this.actions$.pipe(
    ofType(setTopics),
    map((action) => 
      this.service.set(action.payload.id))),
  { dispatch: false });

setHeadlines$ = createEffect(
  () => this.actions$.pipe(
    ofType(setHeadlines),
    map((action) => 
      this.service.set(`ldb:${action.payload.id}:0`))),
  { dispatch: false });

I attempted to combine actions using ofType(setTopics,setHeadlines), but I'm unsure how to pass different ids in this.service.set().

Any help would be greatly appreciated!

javascript angular typescript ngrx

Answer 1

Answer №1

There are two approaches to accomplishing this:

If you want the effect to be specific to what it receives, use the set headlines action to set ldb:<id>:0 in the payload as the label. The setTopics payload will then set the label same as the id (or if the label does not exist in setTopics, check if the label exists in the effect and use the label, otherwise use the id).
If being generic is not a concern, try something like this:

if (action.type === actionsType.ACTION1) {
    value = action.payload.id
  } else if (action.type === actionsType.ACTION2) {
    value = `ldb:${action.payload.id}:0`
  }
this.service.set(`ldb:${action.payload.id}:0`)

Answer 2

There are two approaches to accomplishing this:

If you want the effect to be specific to what it receives, use the set headlines action to set ldb:<id>:0 in the payload as the label. The setTopics payload will then set the label same as the id (or if the label does not exist in setTopics, check if the label exists in the effect and use the label, otherwise use the id).
If being generic is not a concern, try something like this:

if (action.type === actionsType.ACTION1) {
    value = action.payload.id
  } else if (action.type === actionsType.ACTION2) {
    value = `ldb:${action.payload.id}:0`
  }
this.service.set(`ldb:${action.payload.id}:0`)

Merge effects into a single NgRx store

Answer №1

Similar questions

What are the steps to input text into a textbox on a different domain using my own domain?

What is the correct way to align text in jsPDF?

Randomize elements with the click of a button

Switching classes in real time with JavaScript

Problems Encountered with Basic JSON-P Example

Incorporate a Variety of Elements onto Your Webpage

Installation of the package was unsuccessful: npm encountered an error with code ERESOLVE, indicating that it was unable to destructure the property 'name' from 'node' as it is currently null

Enhance the Vue.js performance by preloading components

Enhance multiple select functionality

In Javascript, the color can be changed by clicking on an object, and the color

Set element back to its default state

Differences in JSON parsing behavior between Chrome and Firefox

Passing information from the main component to a service through API connections

What is the best way to automatically log out a user once their session cookie has expired during an online exam?

Skip ahead button for fast forwarding html5 video

What is the best way to implement a timer or interval system in React and Next.js that continues running even when the tab is not in focus or the browser is in

There appears to be an issue with displaying the graph

"Delve into the art of utilizing negative space between elements with

Tips for positioning a chat box at the bottom of a v-card's visible area

Are there advantages to incorporating d3.js through npm in an Angular 2 TypeScript project?