Состояние хранилища ngrx не определено

Question

Я не уверен, почему мое состояние в моем магазине не определено, когда я пытаюсь получить к нему доступ. Я уже давно смотрю на это и не могу понять.

мои действия

export const GetMerchants = createAction('[Merchant] - Get Merchants');

export const GetMerchantsSuccess = createAction(
    '[Merchant] - Get Merchants Success',
    props<{ payload: Merchant[] }>()
);
export const GetMerchantsFailure = createAction(
    '[Merchant] - Get Merchants Failure',
    props<{ payload: Error }>()
);

Мои редукторы и определение состояния

export default class MerchantListState {
    merchants: Array<Merchant>;
    merchantError: Error;
}

export const initializeMerchantListState = (): MerchantListState => {
    return {
        merchants: new Array<Merchant>(),
        merchantError: null
    };
};
export const intialMerchantListState = initializeMerchantListState();


const _reducer = createReducer(
    intialMerchantListState,
    on(actions.GetMerchants, (state: MerchantListState) => {
        return { 
            ...state
        };
    }),   
    on(actions.GetMerchantsSuccess, (state: MerchantListState, { payload }) => {
        let newstate = { ...state, 
                merchants: [ ...state.merchants, payload], 
                merchantError: null 
        };
        return newstate;
    }),
    on(actions.GetMerchantsFailure, (state: MerchantListState, { payload }) => {
      console.log(payload);
      return { ...state, merchantError: payload };
    }),
  );

  export function merchantListReducer(state: MerchantListState, action: Action) {
    return _reducer(state, action);
  }

Мои эффекты

@Injectable()
export class MerchantListEffects {
    constructor(private apiService: ApiService, private apiRouteService: ApiRouteService, private action$: Actions) { }

    GetMerchants$: Observable<Action> = createEffect(() =>

        this.action$.pipe(
            ofType(actions.GetMerchants),
            mergeMap(action => this.apiService.get(this.apiRouteService.toMerchants()).pipe(
                map((data: Merchant[]) => { console.log(data); return actions.GetMerchantsSuccess({ payload: data }); }
                ), catchError((error: Error) => { return of(actions.GetMerchantsFailure({ payload: error })) })
            )
            )));
}

Когда я внедряю состояние в компонент

private store: Store<{ merchantList: MerchantListState }>

Я получаю неопределенный купец $ observable, когда пытаюсь это сделать

this.merchants$ = store.pipe(select('merchantList'));
this.merchantSubscription = this.merchants$.pipe(
      map(x => {
        console.log(x.merchants);
      })
    )
    .subscribe();

При нажатии кнопки я загружаю торговцев этим рассылка

this.store.dispatch(actions.GetMerchants());

У меня есть мой редуктор и эффекты, определенные в AppModule

    StoreModule.forRoot({ merchantList: merchantListReducer }),
    EffectsModule.forRoot([MerchantListEffects])

Это то, что мне не хватает?

Answer 1

Первый параметр createReducer - это значение, а не функция. API> @ ngrx / store createReducer

Если вы используете функцию, вы должны вызвать ее:

const _reducer = createReducer(
   intialMerchantListState()

Я предпочитаю способ прямого определения значения initialState :

export const initializeMerchantListState: MerchantListState = {
        merchants: new Array<Merchant>(),
        merchantError: null
};