Two objects for two states with NgrxStore

Question

I want to know if I can use for the same store for two objects. Cause in my component I need myProfile and the Profile of the other user. And when I use my second method, the second profile overwrites the first.

My first method:

this.store$.dispatch(new ProfileFeatureStoreActions.GetProfile());

    this.myProfile$ = this.store$.pipe(
      select(
        ProfileFeatureStoreSelectors.selectProfile
      ),
      skipWhile(val => val === null),
      filter(profile => !!profile)
    );

    // redirection or create the page
    this.myProfile$.subscribe(myprofile => {
      this.myprofile = myprofile;
      this.redirrection(this.pseudo_profile , this.myprofile._meta.pseudo);
    });

My second method:

this.store$.dispatch(new ProfileFeatureStoreActions.GetProfileByPseudo('ets_raphael'));

    // a continuer par ici
    this.profilePage$ = this.profileStore$.pipe(
      select(
        ProfileFeatureStoreSelectors.selectProfilePage
      ),
      tap((list) => console.log(list)),
      filter(value => value !== undefined),
    );

    this.profilePage$.subscribe(profile => {
      this.profilepage = profile;
    });

And this is my selector:

export const selectProfileFeatureState: MemoizedSelector<
  object,
  State
> = createFeatureSelector<State>('profileFeature');

export const selectProfilePageFeatureState: MemoizedSelector<
  object,
  State
> = createFeatureSelector<State>('profilePageFeature');

export const selectProfile = createSelector(
  selectProfileFeatureState,
  getProfilePage
);

export const selectProfilePage = createSelector(
  selectProfilePageFeatureState,
  ge

Thank you if you can help me. Maybe I missed something

Answer 1

Thank you! I got the solution, if we want to use two object by the same time we need to use two states. It was normals that I had an overwrite cause I used only one state. This is my code :

import { Actions, ActionTypes } from './actions';
import { initialStateProfile, StateProfile, initialStateProfilePage, StateProfilePage } from './state';

export function featureReducerProfile (state: StateProfile = initialStateProfile, action: Actions) {
  switch (action.type) {
    case ActionTypes.UPDATE_PROFILE_SUCCESS:
      case ActionTypes.GET_PROFILE_SUCCESS: {
      return {
        ...state,
        profile: action.payload,
        isLoading: false,
        error: null
      };
    }
    case ActionTypes.GET_PROFILE_START:
    case ActionTypes.UPDATE_PROFILE_START: {
      return {
        ...state,
        isLoading: true,
        error: null
      };
    }
    case ActionTypes.GET_PROFILE_FAIL:
    case ActionTypes.UPDATE_PROFILE_FAIL: {
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    }
    default: {
      return state;
    }
  }
}


export function featureReducerProfilePage (state: StateProfilePage = initialStateProfilePage, action: Actions) {
  switch (action.type) {
      case ActionTypes.GET_PROFILE_BY_PSEUDO_SUCCESS: {
      return {
        ...state,
        profile: action.payload,
        isLoading: false,
        error: null
      };
    }
    case ActionTypes.GET_PROFILE_BY_PSEUDO_START: {
      return {
        ...state,
        isLoading: true,
        error: null
      };
    }
    case ActionTypes.GET_PROFILE_BY_PSEUDO_FAIL: {
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    }
    default: {
      return state;
    }
  }
}

Don't forget to modify your NgModule :

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    StoreModule.forFeature('profileFeature', featureReducerProfile),
    StoreModule.forFeature('profilePageFeature', featureReducerProfilePage),
    EffectsModule.forFeature([ProfileFeatureEffects])
  ],
  providers: [
    ProfileFeatureEffects
  ]
})