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

Question

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

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

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

当然，我可以将 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);
    });
  }