关于 @ngrx/Store 下 obj 的扩展问题

为什么80%的码农都做不了架构师？>>>

昨天做 task 的时候，遇到了一个问题。

TypeError: can't define property "x": "obj" is not extensible

而我的代码是

 public txTiles: Array<TransactionFilterTile>;constructor(private _store: Store<AppStore>){_store.select(str => str.transactionState.tiles).subscribe(tiles => {this.txTiles = tiles;// tiles是一个对象数组this.txTiles.forEach( (x) => {x.currentStyle = { 'border-color': `${x.htmlColor}` };// 给currentStyle属性再赋值});}
}

究其原因，项目中使用了 ngrx/store，它是 RXJS 的一种超牛叉的状态管理，由 Redux 支持。Redux 可以确保 state 变化的可预测性，主要的约束有：

state 以单一对象存储在 store 对象中；
state 只读
使用纯函数 reducer 执行 state 更新

所以，服务器端的响应数据是只读的，且只能通过 dispatch(action)来触发更新，所以在 ts 文件里面不能随意给 tile 的属性重新赋值，可我又不想通过 dispatch 改变底层数据，那么该怎么办呢？我们可以克隆获取的数据。修改后的代码为：

 _store.select(str => str.transactionState.tiles).subscribe(tiles => {this.txTiles = [];// 构建空数组if (tiles && tiles.length) {tiles.forEach(x => {self.txTiles.push(new TransactionFilterTile(x));});}this.txTiles.forEach( (x) => {x.currentStyle = { 'border-color': `${x.htmlColor}` };// 给currentStyle属性再赋值});
}

也就是构建空数组，然后把获取到的数据放到空数组中，这样既可以不更改底层数据，又可以在本组件中对从服务器获取到的数据进行修改。

转载于:https://my.oschina.net/hyzccc/blog/2086032

关于 @ngrx/Store 下 obj 的扩展问题相关推荐

[QML][Json] QML下Json操作扩展(增删查改)
QML下Json操作扩展(增删查改) 具体代码实现如下链接: https://github.com/Asa-gc/SUTL/blob/main/src/qml/func/MyJson/MyJson.j ...
NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
测试源代码: import { Component } from '@angular/core'; import { createSelector } from '@ngrx/store';expor ...
NgRx Store createSelector 的单步调试和源代码分析
源代码: import { Component } from '@angular/core'; import { createSelector } from '@ngrx/store';export ...
NgRx Store里的StoreModule.forRoot()
NgRx Store is mainly for managing global state across an entire application. In cases where you need ...
从ngrx store里selector出来的Observable，执行subscribe的单步调试
源代码: getNextPageContext(): Observable<PageContext> {const a = this.store.pipe(select(RoutingSe ...
Windows 下开发PHP扩展资源
1.Windows 下开发PHP扩展 http://www.shinrun.com/htmls/100101-37.html 2.windows下开发PHP扩展dll(无需Cygwin) http:/ ...
[bash] 打包某目录(可以是绝对路径)下的指定扩展名的文件
#!/bin/bash # 该脚本用于打包某目录(可以是绝对路径)下的指定扩展名的文件 if [ $# -lt 1 ] || [ "$1" = "." ] || ...
springBoot JPA 数据库字段(实体类)带下划线在扩展findBy方法时出错的解决办法
springBoot JPA 数据库字段(实体类)带下划线在扩展findBy方法时出错的解决办法参考文章: (1)springBoot JPA 数据库字段(实体类)带下划线在扩展findBy方法时出 ...
C++查找一个目录下所有特定扩展名的文件
记录一个小技巧,查找一个目录下所有特定扩展名的的文件名.代码所示是查找所有后缀为".txt"的文件名,并将结果存储于名为statfileurllist的vector中注:也可以查 ...

关于 @ngrx/Store 下 obj 的扩展问题

关于 @ngrx/Store 下 obj 的扩展问题相关推荐

最新文章

热门文章