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

我的reducer和state def是

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

当我尝试执行此操作时，我得到了一个不确定的可观察到的商人

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

ngrx存储状态未定义

1 个答案: