Ngrx selectors return same recordset

Question

I have declared the following in my app.module.

StoreModule.forFeature('selectedPhotos', photoReducer),
StoreModule.forFeature('XboxPhotos', photoReducer),

then in my selector I have:

export const getPhotoState = createFeatureSelector<ProductResponse>('selectedPhotos');

export const selectPhotos = createSelector(getPhotoState, (state: ProductResponse) => { return state.results });
export const getXboxPhotoState = createFeatureSelector<ProductResponse>('XboxPhotos');

export const XboxPhotos = createSelector(getXboxPhotoState, (state: ProductResponse) => { return state.results });

in my page component file I have a constructor declared:

constructor(private store: Store, private filterStore: Store<{ filter: filterValues }>, private xboxStore: Store<{ filter: filterValues }>) { }

I also have variables declared as:

photos$ = this.store.pipe(select(selectPhotos));
xboxPlatform$ = this.xboxStore.pipe(select(XboxPhotos));

Then in my ngOnInit method I set try and set the values.

this.store.dispatch(invokePhotosAPI({ filter: this.filterValues }));

Here, filtervalues are empty so I'm returned all values (this works).

then I create a local variable of type filtervalues and set the values that I want to filter on for my second set of data and call it using:

this.xboxStore.dispatch(invokePhotosAPI({ filter: xBoxFilter }));

My action is declared:

export const invokePhotosAPI = createAction(
  '[Photos API] Invoke Photo Fetch API', props<{ filter: filterValues }>()
);

My effect is declared:

loadAllPhotos$ = createEffect(
  () =>
    this.action$.pipe(ofType(invokePhotosAPI),
      mergeMap((prod) => {
        return this.photosService.getPhotos(prod.filter)
          .pipe(map((data: ProductResponse) => { return photosFetchAPISuccess({ results: data.results, item_Count: data.item_Count  }); }))
      })
    ),
);

with my reducer declared as:

export const initialPhotoState: ProductResponse = { results: [], item_Count: 0 };

export const photoReducer = createReducer(initialPhotoState,
  on(photosFetchAPISuccess, (state, { results, item_Count }) => {
    return { ...state, results, item_Count };
  })

When I run my code. the Photo$ variable correctly has all records that I expect, but by the time I set xboxPlatform$ which has a filtered set, this also sets the Photo$ to the same set of values and I dont understand why as I have declared 2 seperate stores. What am I doing wrong? I'm using Angular 17.

Answer 1

I'm not sure, I wanted to add a comment but my reputation isn't high enough for it.

I think the issue lies in how you've set up your NgRx store. You're using the same reducer (photoReducer) for both selectedPhotos and XboxPhotos slices of state. While this reducer can handle different data sets, it maintains a single state object.

Here's why your photos$ gets overwritten:

1. You define a single reducer (photoReducer) for both slices.
2. When you dispatch the action invokePhotosAPI for xboxPlatform$, the reducer updates the state object held by the store.
3. Since both photos$ and xboxPlatform$ subscribe to the same store, they both reflect the updated state, which now contains the filtered data for xboxPlatform$.

Try defining separate reducers.