如何解决在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))。此表达式将失败。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。