ngrx

Question

我是 ngrx 和 Angular 开发的新手。我的商店里有一系列交易。一个效果监听 LoadTradeRequest，它触发一个 http 请求以获取 Observable 并触发 LoadTradeSuccess 或 LoadTradeFailure。

@Effect()
loadTrade$: Observable<Action> = this.actions$.pipe(
ofType(ActionTypes.LoadTradeRequest),
mergeMap((action: actions.LoadTradeRequest) =>
  this.remoteApiService.loadTrade(action.payload).pipe(
    map(trade => new actions.LoadTradeSuccess(trade)),
    catchError(err => of(new actions.LoadTradeFailure(err)))
  )
 )
);

LoadTradeSuccess 操作的缩减函数将加载的交易添加到商店。

  case ActionTypes.LoadTradeSuccess: {
  return { ...state, trades: [...state.trades, action.payload] };
}

我的州声明是

trades: Trade[];

到目前为止一切正常。我现在需要更改状态，使交易集合以唯一标识符为键，该标识符在 LoadTradeRequestAction

的操作有效负载中给出

期望状态

trades: DictionaryItem<string, Trade>[];

DictionaryItem 在哪里

export interface DictionaryItem<K, V> { 0: K; 1: V; }

如何将触发效果的操作的属性与 http 响应一起传递给它触发的操作。下面的块不起作用，只是试图说明我想要实现的目标。

@Effect()
loadTrade$: Observable<Action> = this.actions$.pipe(
ofType(ActionTypes.LoadTradeRequest),
mergeMap((action: actions.LoadTradeRequest) =>
this.remoteApiService.loadTrade(action.payload).pipe(
map(trade => new actions.LoadTradeSuccess({**action.payload.UniqueIdentifier**, trade})),
catchError(err => of(new actions.LoadTradeFailure(err)))
 )
)

Answer 1

您操作的构造函数必须接收两个参数：

class LoadTradeSuccess {
  constructor(readonly id: any, readonly  trade: any){}
}

或者一个有效负载对象，但是你必须在效果中创建该对象

class LoadTradeSuccess {
  constructor(readonly payload: any){}
}


map(trade => new actions.LoadTradeSuccess({id: action.payload.UniqueIdentifier, trade: trade })),

ngrx - 将触发动作的有效载荷传递给下一个动作

ngrx - passing in payload of triggering action to next action

angular

typescript

ngrx-effects