ngrx updateOne 更改 ids 数组排序
ngrx updateOne change ids array sorting
我有一个从 API 加载到 NGRX 商店的发票索引,
当用户输入单个发票时,它会更新 API.
中的完整详细信息
问题是当我使用 Ngrx 时索引顺序改变了 updateOne
我发现 ids 数组在更新时将实体移到了前面。
这个问题是已知的,应该在较旧的 Ngrx 版本 (v10) 上得到解决:
https://github.com/ngrx/platform/issues/571
我正在使用 Ngrx 版本 12
按状态排序部分
export const invoicesAdapter: EntityAdapter<InvoiceInterface> = createEntityAdapter<InvoiceInterface>({
selectId: customizedInvoiceId,
sortComparer: sortByCreatedAt
});
export function customizedInvoiceId(a: InvoiceInterface): string {
return a.id;
}
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return a.createdBy?.toLocaleString().localeCompare(b.createdBy?.toLocaleString());
}
Reducer 上的 updateOne
const _invoicesReducer = createReducer(
initialInvoicesState,
on(addInvoiceSuccess, (state, action) => {
return invoicesAdapter.addOne(action.invoice, state);
}),
on(updateInvoiceSuccess, (state, action) => {
return invoicesAdapter.updateOne(action.invoice, state);
}),
...
Angular 和 Ngrx 包
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.0",
"@angular/common": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@angular/service-worker": "~12.2.0",
"@ngrx/effects": "^12.5.1",
"@ngrx/entity": "^12.5.1",
"@ngrx/router-store": "^12.5.1",
"@ngrx/store": "^12.5.1",
"@ngrx/store-devtools": "^12.5.1",
"@capacitor/android": "3.1.1",
...
问题出在排序函数上
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return a.createdBy?.toLocaleString().localeCompare(b.createdBy?.toLocaleString());
}
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return b.createdAt?.toLocaleString().localeCompare(a.createdAt?.toLocaleString());
}
createdBy
是一个对象
我有一个从 API 加载到 NGRX 商店的发票索引, 当用户输入单个发票时,它会更新 API.
中的完整详细信息问题是当我使用 Ngrx 时索引顺序改变了 updateOne
我发现 ids 数组在更新时将实体移到了前面。
这个问题是已知的,应该在较旧的 Ngrx 版本 (v10) 上得到解决: https://github.com/ngrx/platform/issues/571
我正在使用 Ngrx 版本 12
按状态排序部分
export const invoicesAdapter: EntityAdapter<InvoiceInterface> = createEntityAdapter<InvoiceInterface>({
selectId: customizedInvoiceId,
sortComparer: sortByCreatedAt
});
export function customizedInvoiceId(a: InvoiceInterface): string {
return a.id;
}
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return a.createdBy?.toLocaleString().localeCompare(b.createdBy?.toLocaleString());
}
Reducer 上的 updateOne
const _invoicesReducer = createReducer(
initialInvoicesState,
on(addInvoiceSuccess, (state, action) => {
return invoicesAdapter.addOne(action.invoice, state);
}),
on(updateInvoiceSuccess, (state, action) => {
return invoicesAdapter.updateOne(action.invoice, state);
}),
...
Angular 和 Ngrx 包
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.0",
"@angular/common": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@angular/service-worker": "~12.2.0",
"@ngrx/effects": "^12.5.1",
"@ngrx/entity": "^12.5.1",
"@ngrx/router-store": "^12.5.1",
"@ngrx/store": "^12.5.1",
"@ngrx/store-devtools": "^12.5.1",
"@capacitor/android": "3.1.1",
...
问题出在排序函数上
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return a.createdBy?.toLocaleString().localeCompare(b.createdBy?.toLocaleString());
}
export function sortByCreatedAt(a: InvoiceInterface, b: InvoiceInterface): number {
return b.createdAt?.toLocaleString().localeCompare(a.createdAt?.toLocaleString());
}
createdBy
是一个对象