What is the most effective way to use a withLatestFrom within an effect when integrating a selector with props (MemoizedSelectorWithProps) sourced from the action?

I am struggling to utilize a selector with props (of type MemoizedSelectorWithProps) in an effect inside WithLatestFrom. The issue arises because the parameter for the selector (the props) is derived from the action payload, making it difficult for withLatestFrom to access the action payload.

My current setup involves Angular 7 and ngrx7. I have attempted using a map to create a new observable without much success...

To better illustrate my predicament, here are some simplified code snippets:

Action:

export const GET_INVENTORY = '[App] Get Inventory';

export class GetInventory implements Action {
  readonly type = GET_INVENTORY;
  constructor(public branchId: number) {} 
}

Effect:

@Effect()
getInventory$ = this.actions$.pipe(
  ofType(GET_INVENTORY),
  withLatestFrom(this.store$.pipe(select(getIsStoreInventoryLoaded, {branchId: action.branchId}))), // Unable to access 'action' here
  switchMap([action, loaded]: [GetInventory, boolean] => {
  if (loaded) {
    console.log('already loaded inventory for this branch', action.branchId);
  } else {
    console.log('never loaded inventory for this branch', action.branchId);
  }
});

While this represents a simplified version of my scenario, the fundamental concept mirrors what I am dealing with in my actual project - maintaining inventory data per "branch" within the store. As a chain of supermarkets, each branch has its own specific inventory data page, where re-fetching should be avoided if already loaded. If you have alternative suggestions other than utilizing MemoizedSelectorWithProps, I am open to exploring those as well.

Answer №1

To solve this issue, consider using either a switchMap or a mergeMap along with a combineLatest.

Here's an example:

@Effect()
getInventory$ = this.actions$.pipe(
  ofType(GET_INVENTORY),
  mergeMap(action =>
    combineLatest(
      of(action),
      this.store$.pipe(select(getIsStoreInventoryLoaded, {branchId: action.branchId}))
    )
  ),
  tap(([action, loaded]) => {
    // Implement the remaining portion of your code here...
  })
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React-redux: Data of the user is not being stored in redux post-login

Hello everyone, I am fairly new to using react-redux and I'm currently facing an issue with storing user information in the redux store after a user logs in. I am utilizing a django backend for this purpose. When I console out the user in app.js, it ...

Is d3 Version pretending to be a superior version?

I have encountered an issue with my project that involved using d3 v5.5.0. After transferring it to a different computer and running npm install, the application now seems to be recognizing d3 as a higher version? A crucial part of my program relies on th ...

Why isn't my Visual Studio updating and refreshing my browser after making changes to the Angular project?

Having added an Angular project and running it successfully with ng serve / npm start, I encountered an issue. After making changes to the project and saving them using ctrl+s or file/all save, the project server did not recompile and the browser did not ...

Utilizing an AwsCustomResource in AWS CDK to access JSON values from a parameter store

I found a solution on Stack Overflow to access configurations stored in an AWS parameter. The implementation involves using the code snippet below: export class SSMParameterReader extends AwsCustomResource { constructor(scope: Construct, name: string, pr ...

Rotating camera independently from its parent in Three.js

I have a scenario where an Entity is traversing a CatmullRomCurve3 path, moving left with the left or down arrow keys and right with the right or up arrow keys. Initially, I encountered an issue where I wanted the Entity to face perpendicular to the path ...

What is the best way to evaluate a sequence of actions and their outcomes?

Recently, I've dived into the world of writing automated tests for a React application. Along the way, I encountered some intriguing questions about the best approach to testing a series of interactions within the app. Let's imagine a scenario w ...

conversion of text to number using JavaScript

After pulling values from an XML file using JavaScript, I face the challenge of converting a string to an integer in order to perform calculations. To extract data from the XML file, I use the following snippet: var pop = JSON.stringify(feature.attribute ...

Unlocking hidden gridview column values with the power of jQuery

Within my gridview control, there are 4 columns, with one column being invisible which contains the Email Address information. <asp:GridView id='gridData' runat='server'> <Columns> <asp:TemplateField> ...

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

Is there a way to prevent the Alt+F4 function from closing tabs in the Internet Explorer browser

Ctrl+W and Alt+F4 can be used to close the IE browser, but I am looking to disable this default action. While I have found a way to handle the Ctrl+W command, I am struggling with disabling the Alt+F4 event. It seems that other Alt+Key events like Alt+En ...

POSTMAN - error when making a post request with the message "The media type 'application/json' is not compatible with this resource."

Snippet of Web API code: [HttpPost] [ODataRoute("GetCMMAutoForLoggedInUser")] public IHttpActionResult GetCMMAutoForLoggedInUser(CMMPermissionRequest request) { var data = this.CommonDomain.GetCMMAutoForLoggedInUser(request); return Ok(data); } ...

I require assistance in understanding how to successfully implement ParseINT with (row.find)

enter image description hereHow To Utilize ParseINT Using row.find(). I Attempted This Code But It Doesn't Work. This is My Code : function update_qty() { var row2 = $(this).parents('.item-row'); var price2 = row2.find(parseInt($ ...

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

Efficiently loading images asynchronously for smooth execution of JavaScript using Splide. Resolving Largest Contentful Paint (LCP) issue specifically on mobile

My webpage features a carousel of images at the top, created with Splide. However, I have noticed that my LCP score is significantly lower on mobile devices compared to desktop. The culprit seems to be in the Load Delay section: Time to first byte (TTFB) ...

How can we adjust the number of items based on the width of the viewport in Vue.js?

Imagine having a template that showcases a specific number of items, like this: <template> <div> <div v-for="item in items.slice(0, 10)" :key="item" /> </div> </template> How can I adjust the numbe ...

Refresh the HTML webpage using AJAX technology

I am trying to implement a simple html page with a single table that updates in the background every 5 seconds. The traditional solution of using <meta http-equiv="refresh" content="5"> is not suitable as it would disrupt the user experience by displ ...

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

I'm currently grappling with coding a recursive function, specifically one that involves "Tree Recursion". I could really use some guidance to steer me in the right direction. To better explain my dilemma, let's consider a basic example showcasi ...

The ngTemplateOutletContext context source is not defined

That snippet of code was functional with Angular 2, and possibly even with versions earlier than Angular 4.3.6. Currently, the gradingKey object is undefined within the display or edit template section. However, it is not undefined in the getTemplate(gra ...

retrieve a nested object's property using a dynamic string

Here is the object model I am working with: export class FrcCapacity { constructor( public id?: number, public frcId?: number, public capGroupId?: number, public capGroup?: CapGroup, public salesProductId?: number, public p1?: num ...

Dynamic value for href in div using Angular

Implementing a dynamic submenu using Angular is my current project. At the moment, I have set the href attribute with hardcoding as shown below: <ng-template #preSelectionMenuItem let-preSelections="preSelections"> <div class=' ...