Saving a snapshotChanges document in the NGRX state throws the error: Cannot freeze

Question

我正在使用 Firebase 创建一个分页系统，为此我必须将文档传递给“@angular/fire/compat/firestore”库的“startAfter()”函数。

在我的应用中，我使用NGRX进行状态管理，当触发效果并添加文档时，出现错误。

我会说我没有改变状态，我正在解构所有对象和数组作为预防措施，但我仍然收到错误“错误类型错误：无法冻结”

技术：

离子
Angular
Firebase - Firestore
ngrx

型号：

export interface Page<T> {
  items: T[],
  primerDoc: any;
  ultimoDoc: any;
  limit: number;
}

服务代码：

  getPopularGames(page: Page<Game>) {
    return this.firestore.collection<Game[]>(environment.db_tables.games, ref => ref.orderBy('average_rating', 'desc').limit(page.limit)).snapshotChanges();
  }
  getMorePopularGames(page: Page<Game>){
    console.log(page);
    return this.firestore.collection<Game[]>(environment.db_tables.games, ref => ref.orderBy('average_rating', 'desc').limit(page.limit).startAfter(page.ultimoDoc)).snapshotChanges();
  }

NGRX:

操作数：



    export const loadPopularGames = createAction(
      '[游戏] loadPopularGames',
      道具 }>()
    );
    export const loadPopularGamesSuccess = createAction(
      '[游戏] loadPopularGamesSuccess',
      道具 }>()
    );
    export const loadPopularGamesFail = createAction(
      '[游戏] loadPopularGamesFail',
      道具（）
    );
    export const loadMorePopularGames = createAction(
      '[游戏] loadMorePopularGames',
      道具 }>()
    );
    export const loadMorePopularGamesSuccess = createAction(
      '[游戏] loadMorePopularGamesSuccess',
      道具 }>()
    );
    export const loadMorePopularGamesFail = createAction(
      '[游戏] loadMorePopularGamesFail',
      道具（）
    );

</pre>

效果：



      loadPopularGames$ = createEffect(() =>
        this.actions$.管道(
          ofType(gamesActions.loadPopularGames),
          mergeMap((action) => this.gameService.getPopularGames(action.page)
            。管道（
              地图（（snapshotChanges：任何）=> {
    
                const copy = [...snapshotChanges];
    
                常量页：页 = {
                  项目：copy.map（（项目：任何）=> {
                    return{
                      编号：item.payload.doc.id，
                      ...item.payload.doc.data()
                    }
                  }),
                  primerDoc: { ...snapshotChanges[0].payload.doc }, //这里是错误
                  ultimoDoc: { ...snapshotChanges[snapshotChanges.length - 1].payload.doc }, //这里是错误
                  极限：action.page.极限
                }
    
                return gamesActions.loadPopularGames成功（{ page: { ...page } }）
              }),
              catchError(err => of(gamesActions.loadPopularGamesFail({ error: err })))
            )
          )
        )
      );
      loadMorePopularGames$ = createEffect(() =>
        this.actions$.管道(
          类型（gamesActions.loadMorePopularGames），
          mergeMap((action) => this.gameService.getMorePopularGames(action.page)
            。管道（
              地图（（snapshotChanges：任何）=> {
                常量页：页 = {
                  项目：snapshotChanges.map（（项目：任何）=> {
                    return{
                      编号：item.payload.doc.id，
                      ...item.payload.doc.data()
                    }
                  }),
                  primerDoc: snapshotChanges[0],
                  ultimoDoc：snapshotChanges[snapshotChanges.length - 1]，
                  极限：action.page.极限
                }
                return gamesActions.loadMorePopularGames成功（{ page: page }）
              }),
              catchError(err => of(gamesActions.loadMorePopularGamesFail({ error: err })))
            )
          )
        )
      );
</pre>

减速器：



    on(authActions.loadPopularGamesSuccess, (state, { page }) => (
        {
          ...状态，
          popular_games: 页
        }
      )),
    on(authActions.loadMorePopularGamesSuccess, (state, { page }) => (
        {
          ...状态，
          popular_games：{
            ...页，
            项目：[...state.popular_games.items，...page.items]
        }
    }))

</pre>

Answer 1

我不知道firebase是什么APIreturns，但我的猜测是primerDoc或ultimoDoc不能被冻结。例如，它可以是一个 class 实例。

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Answer 2

primerDoc: Object.freeze(snapshotChanges[0].payload.doc),
ultimoDoc: Object.freeze({ ...snapshotChanges[snapshotChanges.length - 1].payload.doc }),

文档：Object.freeze()

Saving a snapshotChanges document in the NGRX state throws the error: Cannot freeze

Saving a snapshotChanges document in the NGRX state throws the error: Cannot freeze

firebase

ionic-framework

ngrx

ngrx-effects

angular