Question

我已经在一个已经正在运行的应用程序中实现了一个Ngrx商店但是我得到了一些意想不到的行为，我很乐意得到一些反馈。更确切地说，这是让我感到困惑的部分。

action.ts：

export class AddGeoReports implements Action {
    readonly type = ADD_GEOREPORTS_MAP;
    constructor( public payload: { key: string, data: reportPreviewObj[] }) { }
}

reducer.ts

export interface GeoReportsMap {
    data: Map<string, reportPreviewObj[]>
}
const initialState: GeoReportsMap = {
data: new Map()
} 

export function reducer(state = initialState, action: fromActions.GeoReportsMapAction): GeoReportsMap {

        switch(action.type) {
            case fromActions.ADD_GEOREPORTS_MAP: {
                const newState = state.data;
                newState.set(action.payload.key, action.payload.data)

                console.log(newState);
                return {...state, data: newState }
            }

            default: return state
        }
};

service.ts

createGeoReportMapping(geoMappingKey: string , reportPreviewObj: reportPreviewObj){

    let geoReport: reportPreviewObj[] = this.geoReportsMap.get(geoMappingKey);


    if (!geoReport) {
        ...
    } else {
        ...
    }

    this.store.dispatch<fromStore.GeoReportsMapAction>(new fromStore.AddGeoReports({key: geoMappingKey, data: geoReport}));
    }

component.ts

subscribe(reportsObjects => {
    if (reportsObjects.data) {

      this.reportsObjects = reportsObjects.data;
      this.reportsObjects.forEach((reportObject) => {

        if (!Array.isArray(reportObject.data) && (reportObject.data.inspectionInfo.coordinates) && (reportObject.data.inspectionInfo.orderStatusShortname !== 'CLOSED')) {

          let reportPreviewObj: reportPreviewObj = {
                  ...
          };

          if (reportObject.data.documentationView) {
            ...
          }


          const geoMappingKey = `${parseFloat(reportObject.data.inspectionInfo.coordinates.lat.toFixed(7))}, ${parseFloat(reportObject.data.inspectionInfo.coordinates.lng.toFixed(7))}`
          this.mapService.createGeoReportMapping(geoMappingKey, reportPreviewObj);
        }
      });

现在在服务中执行之后，我希望每次从组件调用此函数时都会有一个调度事件，我将能够在reducer console.log（）中看到，而不是我是什么得到的是该函数被调用了30次（如果我有30个报告）并且只有它继续进入减速器并在接下来的30轮中停留直到地图被填满。从本质上讲，它似乎以某种方式存储/保存调度调用到商店，并在完成所有报告的功能后执行它们。另外，一旦它进入那里就会经过reducer调用，因为它们都是异步调用。

任何帮助将不胜感激！谢谢！

使用： “@ ngrx / store”：“^ 5.2.0”， “@ angular / core”：“^ 5.2.0”，

NGRX store.dispatch（）循环中的sync / async调用

0 个答案: