如何在没有重复存储对象的情况下在多个状态模型之间进行交互 - NGXS

Question

为了降低我应用程序中所有状态的复杂性，我决定使用 NGXS，因为它使用 TypeScript 方式实现，非常适合 Angular 架构。但是第一个问题出现得相当快，因为NGXS相对于NGRX没有增加额外的解耦reducer层。

在多个状态模型之间进行交互的最佳做法是什么？假设你想操纵状态 B，但此操作需要状态 A 的属性。我在文档中找到了可以处理这个问题的共享状态概念，但这也是有限的，因为我不能在选择器中使用共享状态来为 UI 提供基于状态 A 和B 要求.

例如，我得到了商店中展示的以下型号。此示例中的问题是，从 DeviceState 获取 selectedDevice 的 deviceId 以在 DeviceHistoryState 到 return 中使用它的最佳方法是什么所选设备的项目历史记录。

当然，我可以将 DeviceHistory 集成到 Device 模型中，但这并不能解决在多个状态之间执行操作的问题。我也不想将 selctedDevice 复制到 DeviceHistoryStateModel 中。

export interface Device {
    deviceId: string;
    // More device details
}

export interface DeviceHistory {
    deviceId: string;
    itemHistoryMap: Map<number, ItemHistory[]>;
}

export class DeviceStateModel {
    devices: Device[];
    selectedDevice: Device;
}

@State<DeviceStateModel>({
    name: 'devices',
    defaults: {
        devices: [],
        selectedDevice: null
    }
})
export class DeviceState {

}

export class DeviceHistoryStateModel {
    devicesHistory: DeviceHistory[];
}

@State<DeviceHistoryStateModel>({
    name: 'devicesHistory',
    defaults: {
        devicesHistory: []
    }
})
export class DeviceHistoryState {
    @Selector()
    public static getHistory(state: DeviceHistoryStateModel) {
       // ??? Best practise to return all the item histories of the selcted device 
    }

    @Action(GetItemHistory)
    public getItemHistory() {
        // Stores the item history for the device
    }
}

Answer 1

最简单的选择是使用 Joining Selector。

@Selector()
public static getHistory(state: DeviceHistoryStateModel, deviceState: DeviceStateModel) {
       // ??? Best practise to return all the item histories of the selcted device 
       const selectedDevice = deviceState.selectedDevice;
      //... get history items that match
 }

第二个选项可能是您想要的，因为您希望在 selectedDevice 值更改时自动重新评估此历史记录选择器。

您可能还想检查您使用的 NGXS 版本运行，因为最近（和即将发生的变化）围绕选择器的注入参数选项。

您也可以使用动态选择器按照以下方式进行操作，传入设备 ID 并返回该设备的过滤历史记录：

static getHistory(deviceId: string) {
    return createSelector([DevicesHistoryState], (state: DevicesHistoryStateModel) => {
      return state.devicesHistory.filter(h => h.deviceId === deviceId);
    });
  }

如何在没有重复存储对象的情况下在多个状态模型之间进行交互 - NGXS

How to interact between multiple state models without duplicate store objects - NGXS

rxjs

typescript

redux

angular

ngxs