mobx: как создать промежуточный наблюдаемый класс

Question

Я хочу создать промежуточный класс для вычисления и суммирования данных из хранилища на основе значений ключей (A, B и C)Шаг 1: создать магазин

class store {
    mapping = {
        A: 1,
        B: 3,
        C: 10
    };
}

decorate(store, {
    mapping: observable
});

Шаг 2:

mapDetail должен:

(1) принять входные данные, mapKey.Например, mapKey = A

(2) получить доступ к хранилищу и получить соответствующее значение mapKey.В этом случае 1.

(3) вычислить некоторые значения.Например, map2 и map6.

class mapDetail { // I know this is wrong
    constructor(mapKey) {
        this.mapKey = mapKey;
    }
    get map2() {
        return this.props.store.mapping[this.mapKey] * 2;
    }
    get map6() {
        return this.props.store.mapping[this.mapKey] * 6;
    }

}

decorate(mapDetail, {
    map2: computed,
    map6: computed
});

Шаг 3:

Реагирующий компонент передает mapKeys для создания новых mapDetails и возврата данных.При изменении объекта сопоставления в хранилище этот компонент должен автоматически обновлять значения.

class mapFinal extends React.Component {
    aDetail = new mapDetail("A")
    bDetail = new mapDetail("b")
    render() {
        return (<div> {this.aDetail.map6} {this.bDetail.map2}</div>);
    }
}

Код выше не работал.Кто-нибудь может помочь?

Спасибо!