标签: ngrx

我有一个微型应用程序，在屏幕上显示一个点。

这是绑定到NgRx存储中的状态的简单div。

<div class="dot"
   [style.width.px]="size$ | async"
   [style.height.px]="size$ | async"
   [style.backgroundColor]="color$ | async"
   [style.left.px]="x$ | async"
   [style.top.px]="y$ | async"
   (transitionstart)="transitionStart()"
   (transitionend)="transitionEnd()"></div>

点状态更改由CSS过渡设置动画。

.dot {
  border-radius: 50%;
  position: absolute;

  $moveTime: 500ms;
  $sizeChangeTime: 400ms;
  $colorChangeTime: 900ms;
  transition:
    top $moveTime, left $moveTime,
    background-color $colorChangeTime,
    width $sizeChangeTime, height $sizeChangeTime;
}

我有一个后端，它推送点的更新（位置，颜色和大小）。我将这些更新映射到NgRx动作上。

export class AppComponent implements OnInit {
  ...

  constructor(private store: Store<AppState>, private backend: BackendService) {}

  ngOnInit(): void {
    ...

     this.backend.update$.subscribe(({ type, value }) => {
       // TODO: trigger new NgRx action when all animations …

我编写了以下reducer来存储我的Angular 2应用程序中的状态项.这些项目是金融工具的价格报价(例如股票/货币).

我的Reducer实施如下:

export const offersStore = (state = new Array<Offer>(), action:Action) => {
switch(action.type){

    case "Insert":
        return [
            ...state, action.payload
        ];
    case "Update":
            return state.map(offer => {
                    if(offer.Instrument === action.payload.Instrument)
                    {
                        return Object.assign({}, action.payload);
                    }
                    else return offer;
            });
    case "Delete":
        return state.filter(offer => offer.Instrument !== action.payload )
    default:
        return state;
    }

}

我设法让插入,更新和删除工作 - 虽然这并不容易.我发现Redux与我多年来的编码方式有所不同.

我的应用程序上有一个仪器组件/页面 - 显示一个特定仪器的所有可用信息,由InstrumentId指示,例如"EUR/USD"(存储在payload.Instrument属性中).

我的问题是,我不确定如何有效地搜索特定的仪器并将其从商店中取出.不仅如此,如果商店中的仪器经常通过服务器上的websocket push更新,我还希望更新我获取的仪器.所以我真的需要在商店中搜索特定的工具,并将其作为Observable返回,它将继续根据推送到商店的新数据更新View Component.

我怎样才能做到这一点？

我对这个问题有自己的看法,但最好仔细检查并确定.感谢您的关注并尝试提供帮助.这里是:

想象一下,我们正在调度一个触发一些状态变化的动作,并且还附加了一些效果.所以我们的代码必须做两件事 - 改变状态并做一些副作用.但这些任务的顺序是什么？我们是在同步吗？我相信,首先,我们改变状态,然后做副作用,但有可能,这两个任务之间可能会发生其他事情吗？像这样:我们改变状态,然后在我们之前做过的HTTP请求上得到一些响应并处理它,然后做副作用.

[编辑:]我决定在这里添加一些代码.而且我也简化了它.

州:

export interface ApplicationState {
    loadingItemId: string;
    items: {[itemId: string]: ItemModel}
}

操作:

export class FetchItemAction implements  Action {
  readonly type = 'FETCH_ITEM';
  constructor(public payload: string) {}
}

export class FetchItemSuccessAction implements  Action {
  readonly type = 'FETCH_ITEM_SUCCESS';
  constructor(public payload: ItemModel) {}
}

减速器:

export function reducer(state: ApplicationState, action: any) {
    const newState = _.cloneDeep(state);
    switch(action.type) {
        case 'FETCH_ITEM':
            newState.loadingItemId = action.payload;
            return newState;
        case 'FETCH_ITEM_SUCCESS':
            newState.items[newState.loadingItemId] = action.payload;
            newState.loadingItemId = null;
            return newState;
        default: …

我有以下容器组件

export class EventsComponent {
  data$: Observable<Data[]> = this.store.select(data);
  loading$: Observable<boolean> = this.store.select(loading);
}

并将可观察量绑定| async到表示组件：

 <app-presentational 
   [rowData]="data$ | async" 
   [loading]="loading$ | async" 
   ...

export class PresentComponent {
  @Input()
  rowData: Data[];

  @Input()
  loading: boolean;
}

然而，TS 编译器总是抱怨异步管道可能返回 null。

更新，这是我得到的确切错误

Type 'boolean | null' is not assignable to type 'boolean'.
  Type 'null' is not assignable to type 'boolean'.ngtsc(2322)

那么我真的必须改变我的一切吗@Input()？

export class PresentComponent {
  @Input()
  rowData: Data[] | null;

  @Input()
  loading: boolean | null;
}

我有一个http服务调用,在调度时需要两个参数:

@Injectable()
export class InvoiceService {
  . . .

  getInvoice(invoiceNumber: string, zipCode: string): Observable<Invoice> {
    . . .
  }
}

我如何随后将这两个参数传递给this.invoiceService.getInvoice()我的效果？

@Injectable()
export class InvoiceEffects {
  @Effect()
  getInvoice = this.actions
    .ofType(InvoiceActions.GET_INVOICE)
    .switchMap(() => this.invoiceService.getInvoice())  // need params here
    .map(invoice => {
      return this.invoiceActions.getInvoiceResult(invoice);
    })
}

我@ngrx/store在我的angular(4.x)应用程序中有包,我从v 2.2.2 - > v 4.0.0升级.我可以看到迁移说明说:

已从Action界面中删除有效内容属性.

然而,他们给出的例子似乎完全违反直觉(在我看来......).

我有一个reducer函数,如下所示:

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
        case 'RESET':
            return {
                company: 'MyCo',
                site: 'London'
            }
        default:
            return state
    }
}

正如预期的那样抛出打字稿错误:

[ts]"行动"类型中不存在属性"有效负载"

但是我从迁移指南中不知道这应该改变什么.有任何想法吗？

我正在使用 ngrx 商店。

在我的状态下，我必须物品

export interface ISchedulesState {
  schedulings: ISchedules;
  actualTrips: ISchedule[];
}

这是我的接口

export interface ISchedules {
  [key: string]: ISchedule[];
}

export interface ISchedule {
  dest: number;
  data: string
}

在减速器中我更新 actualTrips

export const SchedulingReducers = (
  state = initialSchedulingState,
  action: SchedulesAction
): ISchedulesState => {
  switch (action.type) {
    case ESchedulesActions.GetSchedulesByDate: {
      return {
        ...state
      };
    }
    case ESchedulesActions.GetSchedulesByDateSuccess: {
      return {
        ...state,
        schedulings: action.payload
      };
    }
    case ESchedulesActions.GetSchedulesByTime: {
      let time = action.payload;
      state.actualTrips = [...(state.schedulings[time] || [])]; …

问题: 错误:商店没有提供商!

我在main.ts中引导商店模块:

platformBrowserDynamic().bootstrapModule(AppModule,[
  provideStore({
    characters, 
    vehicles
  })
]);

并注入vehicle.component.ts:

constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _vehicleService: VehicleService,
    private _store: Store<any>
  ) {}

完整的源代码在这里:GitHub,在GitHub Pages上运行的最新版本

PS.将Store添加到提供程序会导致另一个错误:无法解析Store的所有参数:(？,？,？).

您如何以编程方式与 Cypress 的 Angular/NGRX 交互？cypress 文档似乎仅指 React：https : //www.cypress.io/blog/2018/11/14/testing-redux-store/

// expose store when run in Cypress
if (window.Cypress) {
  window.store = store
}
cy
 .window()
 .its('store')
 .invoke('dispatch', { type: 'ADD_TODO', text: 'Test dispatch' })
// check if the app has updated its UI

这将是 React 方法；那么 Angular 呢？

我有一个使用 NgRx 8.3.0 的 Angular 8 应用程序

对于其中一项操作，我需要在效果之前执行减速器，因为效果取决于简化的状态。NgRx 是否保证该顺序，或者有没有办法强制该顺序？