在NgRx中填充状态期间无法满足状态不变性

问题描述

我有一个对象数组，该对象是从后端下载的，现在我想用它来填充状态变量。问题在于对象具有多层嵌套。

状态为-

const initialState: SummaryStateInterface = {
  summaryList: [],// Problem is only with this one. 
  editIndex: null,editItem: null,addingNew: false,modifications: false,isLoading: false,}

SummaryStateInterface是这样的：

export interface SummaryStateInterface {
  summaryList: Summary[] | null;
  editIndex: number | null;
  editItem: Summary | null;
  addingNew: boolean | null;
  modifications: boolean;
  isLoading: boolean;
}

摘要模型是这样的：

export class Summary {
  @required()
  title: string;
  @required()    // these decorators are for form validation  
  text: string;
  @required()    // these decorators are for form validation
  focus: Focus[] = [];
  @prop()
  focusRef: DocumentReference[];
  seqNo: number;
  id: string;
}

Focus模型是这个-

export class Focus {
  @required()
  name: string;
  seqNo: number;
  id: string;
}

将数据传递给该操作的效果是-

    this.actions$.pipe(
      ofType(readSummaryAction),switchMap(() =>
        this.service.list$.pipe(
          map(list => {
            console.log('This is the list ',list);
            return readSummarySuccessAction({ list });
          }),catchError(() => of(readSummaryFailureAction())),),);

我要填充summaryList的reducer是这样的-

  on(
    readSummarySuccessAction,(state,action): SummaryStateInterface => {
      const updatedSummaryList = [...state.summaryList].concat(
        JSON.parse(JSON.stringify(action.list)),);
      return {
        ...state,summaryList: updatedSummaryList,};
    },

为此操作传递的数据为2个项目的数组（2）[{…}，{…}] 0：{标题：“恢复”，网址：“恢复”，ionicIcon：“”，customIcon：“ ./ assets / portfolio.svg”，打开：false，…} 1：{title：“数据库”，url：“”，ionicIcon：“”，customIcon：“ ./ assets / server.svg”，打开：false，...} 长度：2 proto ：数组（0）

其中一项是-

focus: Array(3)
0: {id: "focusId1",name: "Main",seqNo: 1}
1: {id: "focusId2",name: "CFD",seqNo: 2}
2: {id: "focusId3",seqNo: 4.5,name: "Web"}
length: 3
__proto__: Array(0)
focusRef: (3) [n,n,n] // Firebase document reference
id: "sum1"
seqNo: 2.5
text: "Versatile and detail-driven Mechanical Engineer with a wealth of experience and kNowledge in the Thermal-Fluids area. "
title: "Professional Summary"

抛出的错误是-

core.js:4197 ERROR TypeError: Cannot freeze
    at Function.freeze (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103583:12)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103586:40)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103586:40)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)

UnsubscriptionErrorImpl {消息：“在取消订阅过程中发生2个错误：↵1）TypeEr…：无法添加属性0，对象不可扩展”，名称：“ UnsubscriptionError”，错误：Array（2）}

core.js：4197错误TypeError：无法分配为只读对象'[object Object]'的属性'__zone_symbol__state'

zone-evergreen.js：976未捕获的TypeError：无法添加属性0，对象不可扩展

是否可以获得一些反馈？
我愿意重组（扁平化）状态-但是我不知道要做什么和怎么做。

解决方法

摘要类中的focusRef属性是DocumentReference。不幸的是，由于某些原因，Firebase中的DocumentReference字段具有循环引用。

本文将讨论循环参考主题： Firestore references create a "TypeError: Converting circular structure to JSON"

我将这些引用（ref）转换为字符串-使用它们的path属性（ref.path）。

所有字符串错误都消失了。如果有人能解释从core.js冻结的工作原理，我将非常欢迎-它抛出以下错误-

core.js:4197 ERROR TypeError: Cannot freeze
    at Function.freeze (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103583:12)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103586:40)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)
    at freeze (http://localhost:8101/vendor.js:103586:40)
    at http://localhost:8101/vendor.js:103603:17
    at Array.forEach (<anonymous>)

不相关但有用 要检测对象（x）中的循环引用，请执行以下操作： JSON.parse（JSON.stringify（x））。此表达式将失败。

angular angular ngrx ngrx-effects redux redux redux redux