Question

我想知道我是否可以在同一存储中使用两个对象。原因在我的组件中，我需要myProfile和其他用户的Profile。当我使用第二种方法时，第二个配置文件将覆盖第一个。

我的第一种方法：

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

NgrxStore的两个状态的两个对象

1 个答案: