Два объекта для двух состояний с NgrxStore - PullRequest
1 голос
/ 04 июня 2019

Я хочу знать, могу ли я использовать для одного и того же магазина два объекта.Потому что в моем компоненте мне нужен myProfile и профиль другого пользователя.И когда я использую свой второй метод, второй профиль перезаписывает первый.

Мой первый метод:

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);
    });

Мой второй метод:

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;
    });

А это мой селектор:


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

Спасибо, есливы можете мне помочь.Может быть, я что-то пропустил

1 Ответ

1 голос
/ 05 июня 2019

Спасибо! Я получил решение, если мы хотим использовать два объекта одновременно, нам нужно использовать два состояния. Было нормально, что у меня была перезапись, потому что я использовал только одно состояние. Это мой код:


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;
    }
  }
}

Не забудьте изменить свой NgModule:

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

...