Question

Ngrx：无法分配给对象‘[Object]’的只读属性‘Property’

2019-08-21

48939

javascript angular typescript javascript-objects ngrx

我正在使用 ngrx 存储。

在我的状态下，我有项目

export interface ISchedulesState {
  schedulings: ISchedules;
  actualTrips: ISchedule[];
}

这是我的接口

export interface ISchedules {
  [key: string]: ISchedule[];
}

export interface ISchedule {
  dest: number;
  data: string
}

在 Reducer 中我更新了 actualTrips

export const SchedulingReducers = (
  state = initialSchedulingState,
  action: SchedulesAction
): ISchedulesState => {
  switch (action.type) {
    case ESchedulesActions.GetSchedulesByDate: {
      return {
        ...state
      };
    }
    case ESchedulesActions.GetSchedulesByDateSuccess: {
      return {
        ...state,
        schedulings: action.payload
      };
    }
    case ESchedulesActions.GetSchedulesByTime: {
      let time = action.payload;
      state.actualTrips = [...(state.schedulings[time] || [])]; // if not data return empty array
      return state;
    }
    default:
      return state;
  }
};

但实际上我收到错误

ERROR TypeError: Cannot assign to read only property 'actualTrips' of object '[object Object]'

Answer 1

Redux 模式的基本原则是状态及其部分的不变性，因为它让我们仅通过对象引用来检测变化，而不是比较整个对象。

在您的 Reducer 中，您不能直接分配状态属性 ( state.actualTrips = )，因为变化检测器（和选择器）不会将其检测为已更改。

要修改状态，请返回具有新修改的状态副本。

  const time = action.payload;
  return {
      ...state,
      actualTrips: [...(state.schedulings[time] || [])]
  }

Answer 2

如果你想要改变 state.actualTrips = myNewValue 是不允许的，因为有一个严格的设置。所以一种方法是 clonedeep 并返回对象，比如 newState = cloneOfState... 我没有测试它。所以我在 app.module 中为 Store 更改了设置。我的示例：将 strictStateImmutability 更改为 false（完整文档在这里： https://ngrx.io/guide/store/configuration/runtime-checks )

    StoreModule.forRoot(ROOT_REDUCERS_TOKEN, {
        metaReducers,
        runtimeChecks: {
            // strictStateImmutability and strictActionImmutability are enabled by default
            strictStateSerializability: true,
            strictActionSerializability: true,
            strictActionWithinNgZone: true,
            strictActionTypeUniqueness: true,
            // if you want to change complexe objects and that we have. We need to disable these settings
            // change strictStateImmutability, strictActionImmutability
            strictStateImmutability: false, // set this to false
            strictActionImmutability: true,
        },
    }),

Answer 3

当我更改模板中的输入值时，发生了该错误。我使用的是 Angular11 + NGRX11 ，所以我明白我更改了 store 中的值，这是我的修复方法：

之前：

 this.store.dispatch(new Actions.LoginUser({ user: this.user }));

之后：

 const clone = { 
  user: Object.assign({}, this.user) 
 };
 this.store.dispatch(new Actions.LoginUser(clone));