Ngrx Store 的两个状态的两个对象

Question

我想知道我是否可以为两个对象使用同一个商店。因为在我的组件中我需要 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

如果你能帮助我，谢谢你。也许我错过了什么

Answer 1

谢谢！我得到了解决方案，如果我们想同时使用两个对象，我们需要使用两个状态。我有一个覆盖是正常的，因为我只使用了一个状态。这是我的代码：


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

Ngrx Store 的两个状态的两个对象

Two objects for two states with NgrxStore

angular

ngrx-store