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.