Как взаимодействовать между несколькими моделями состояний без дублированных объектов хранилища - NGXS - PullRequest
Новая
       53

Как взаимодействовать между несколькими моделями состояний без дублированных объектов хранилища - NGXS

0 голосов
/ 07 марта 2020

Чтобы уменьшить сложность всех состояний в моем приложении, я решил использовать NGXS, потому что он использует способ TypeScript для реализации, который не совсем соответствует архитектуре Angular. Но первая проблема появилась довольно быстро, потому что NGXS не добавляет дополнительный слой восстановителя развязки по сравнению с NGRX.

Каков наилучший способ взаимодействия между несколькими моделями состояний? Предположим, вы хотите манипулировать состоянием B, но для этого действия требуется свойство состояния A. Я нашел концепцию общего состояния в документации, которая может справиться с этим, но это также ограничено, потому что я не могу использовать общее состояние в селекторе для предоставления пользовательскому интерфейсу определенного c выбора, основанного на действии, в котором находятся состояния A и B Требуется.

Например я получил следующие модели, которые представлены в магазине. Проблема в этом примере в том, что это лучший способ получить deviceId из selectedDevice из DeviceState, чтобы использовать его в 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
    }
}

1 Ответ

0 голосов
/ 09 марта 2020

У вас есть несколько вариантов, которые я могу придумать.

В getHistory вы можете использовать функцию store.selectSnapShot для получения текущего значения selectedDevice. 

export class DeviceHistoryState {

    constructor(private store: Store) {}

    @Selector([DeviceState])
    public static getHistory(state: DeviceHistoryStateModel) {
       // ??? Best practise to return all the item histories of the selcted device 
       const selectedDevice = this.store.selectSnapshot(DeviceStateModel).selectedDevice;
       //... get history items that match

    }
}

Другой вариант - использовать 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, которую вы используете, поскольку есть последние (и предстоящие изменения) параметры введенных параметров для селекторов.

...