在NGRX狀態下保存snapshotChanges檔案會引發錯誤：無法凍結

我正在使用 Firebase 創建一個分頁系統，為此我必須將一個檔案傳遞給“@angular/fire/compat/firestore”庫的“startAfter()”函式。

在我的應用程式中，我使用 NGRX 進行狀態管理，當觸發效果并添加檔案時，會發生錯誤。

我會說我沒有更改狀態并且我正在解構所有物件和陣列作為預防措施，但我仍然收到錯誤“錯誤型別錯誤：無法凍結”

技術：

1. 離子
2. 角
3. Firebase - Firestore
4. 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(
      '[Games] loadPopularGames',
      props }>()
    );
    export const loadPopularGamesSuccess = createAction(
      '[Games] loadPopularGamesSuccess',
      props }>()
    );
    export const loadPopularGamesFail = createAction(
      '[Games] loadPopularGamesFail',
      props()
    );
    export const loadMorePopularGames = createAction(
      '[Games] loadMorePopularGames',
      props }>()
    );
    export const loadMorePopularGamesSuccess = createAction(
      '[Games] loadMorePopularGamesSuccess',
      props }>()
    );
    export const loadMorePopularGamesFail = createAction(
      '[Games] loadMorePopularGamesFail',
      props()
    );

• 效果：

      loadPopularGames$ = createEffect(() =>
        this.actions$.pipe(
          ofType(gamesActions.loadPopularGames),
          mergeMap((action) => this.gameService.getPopularGames(action.page)
            .pipe(
              map((snapshotChanges: any) => {
    
                const copy = [...snapshotChanges];
    
                const page: Page = {
                  items: copy.map((item: any) => {
                    return {
                      id: item.payload.doc.id,
                      ...item.payload.doc.data()
                    }
                  }),
                  primerDoc: { ...snapshotChanges[0].payload.doc }, //HERE IS THE ERROR
                  ultimoDoc: { ...snapshotChanges[snapshotChanges.length - 1].payload.doc }, //HERE IS THE ERROR
                  limit: action.page.limit
                }
    
                return gamesActions.loadPopularGamesSuccess({ page: { ...page } })
              }),
              catchError(err => of(gamesActions.loadPopularGamesFail({ error: err })))
            )
          )
        )
      );
      loadMorePopularGames$ = createEffect(() =>
        this.actions$.pipe(
          ofType(gamesActions.loadMorePopularGames),
          mergeMap((action) => this.gameService.getMorePopularGames(action.page)
            .pipe(
              map((snapshotChanges: any) => {
                const page: Page = {
                  items: snapshotChanges.map((item: any) => {
                    return {
                      id: item.payload.doc.id,
                      ...item.payload.doc.data()
                    }
                  }),
                  primerDoc: snapshotChanges[0],
                  ultimoDoc: snapshotChanges[snapshotChanges.length - 1],
                  limit: action.page.limit
                }
                return gamesActions.loadMorePopularGamesSuccess({ page: page })
              }),
              catchError(err => of(gamesActions.loadMorePopularGamesFail({ error: err })))
            )
          )
        )
      );

• 減速器：

    on(authActions.loadPopularGamesSuccess, (state, { page }) => (
        {
          ...state,
          popular_games: page
        }
      )),
    on(authActions.loadMorePopularGamesSuccess, (state, { page }) => (
        {
          ...state,
          popular_games: {
            ...page,
            items: [...state.popular_games.items, ...page.items]
        }
    }))

uj5u.com熱心網友回復：

我不知道firebase API回傳什么，但我的猜測是primerDoc或者ultimoDoc不能被凍結。例如，它可以是一個類實體。

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

uj5u.com熱心網友回復：

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

檔案：Object.freeze()

標籤：有角度的 火力基地 离子框架 ngrx ngrx 效果

上一篇：Ionic6-for回圈內的ngIf或ngSwitch具有動態填充的值

下一篇：Ngx-translation不能跨ionic中的不同模塊作業