在NGRX状态下保存snapshotChanges文档会抛出错误:Cannot freeze

Question

我正在使用Firebase创建分页系统，为此我必须将文档传递给"startAfter()"@angular/fire/compat/firestore&quot的函数图书馆。

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

我想说我没有改变状态，我正在解构所有对象和数组作为预防措施，但我仍然得到错误&;error TypeError: Cannot freeze&;

技术:

离子

>

角

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(
'[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()
);

• EFFECTS:

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 })))
)
)
)
);

• REDUCER:

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]
}
}))

Answer 1

I don't know what the firebase API returns, but my guess is thatprimerDocorultimoDoccannot be frozen. It could for example, be a class instance.

Docs: 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 ()