时间戳

首页 > 解决方案 > ngrx store state undefined

angular8 - ngrx store state undefined

问题描述

I am not sure why my state in my store is undefined when I try to access it. I have been looking at this for sometime now and I cannot figure it out.

my actions are

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

My reducers and state def are 

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

My effects

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

When I inject the state into the component

private store: Store<{ merchantList: MerchantListState }>

I get an undefined merchant$ observable when I try to do this

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

On a button click I am loading the merchants with this dispatch

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

I have my reducer and effects defined in AppModule

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

Is it something that I am missing?

标签： angular8ngrxngrx-store

解决方案

createReducer 的第一个参数是一个值，而不是一个函数。 API > @ngrx/store createReducer

如果你使用一个函数，你必须调用它：

const _reducer = createReducer(
   intialMerchantListState()

我喜欢直接定义值initialState的方式：

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

推荐阅读