Angular 7升级至14后Ngrx Selector出现只读属性赋值错误

原因 #

Angular升级到14后，NgRx Store默认启用了状态不可变性保护，从store中获取的状态对象是只读的，无法直接修改其属性值，所以直接给point.x、point.y赋值会触发"Cannot assign to read only property"错误。

解决方案 #

遵循NgRx的不可变数据原则，通过创建新对象来更新属性，有两种常用方式：

方式一：使用对象展开运算符（推荐） #

直接复制原对象的所有属性，同时覆盖需要更新的x和y：

function mapXAndY(points: CloudDataPoint[], delta: boolean) {
    return points.map(point => ({
        ...point,
        x: delta ? point.costDelta : point.cost,
        y: delta ? point.riskDelta : point.risk
    }));
}

方式二：使用Object.assign #

先拷贝原对象到新对象，再修改新对象的属性：

function mapXAndY(points: CloudDataPoint[], delta: boolean) {
    return points.map(point => {
        const newPoint = Object.assign({}, point);
        newPoint.x = delta ? point.costDelta : point.cost;
        newPoint.y = delta ? point.riskDelta : point.risk;
        return newPoint;
    });
}

内容的提问来源于stack exchange，提问作者sourabh