Javascript @ngrx/数据-撤销乐观删除,撤销一个操作是否应恢复changeState?
在@ngrx/data中,乐观删除(我们的英雄“蚂蚁人”)会导致changeState更新,如下所示:Javascript @ngrx/数据-撤销乐观删除,撤销一个操作是否应恢复changeState?,javascript,angular,ngrx,ngrx-effects,angular-ngrx-data,Javascript,Angular,Ngrx,Ngrx Effects,Angular Ngrx Data,在@ngrx/data中,乐观删除(我们的英雄“蚂蚁人”)会导致changeState更新,如下所示: { "entityCache": { "Hero": { "ids": [1, 2, 3, 5, 6], "entities": { "1": { "id": 1, "name": "Spiderman", "power": 1 }, "2": {
{
"entityCache": {
"Hero": {
"ids": [1, 2, 3, 5, 6],
"entities": {
"1": {
"id": 1,
"name": "Spiderman",
"power": 1
},
"2": {
"id": 2,
"name": "Thor",
"power": 5
},
"3": {
"id": 3,
"name": "Hulk",
"power": 6
},
"5": {
"id": 5,
"name": "Iron Man",
"power": 9
},
"6": {
"id": 6,
"name": "Thanos",
"power": 10
}
},
"entityName": "Hero",
"filter": "",
"loaded": true,
"loading": true,
"changeState": {
"4": {
"changeType": 2,
"originalValue": {
"id": 4,
"name": "Ant-Man",
"power": 7
}
}
}
}
}
}
使用下面的效果,当由于http请求错误导致删除失败时,我启动了一个UNDO_ONE:
deleteError$ = createEffect(() => {
return this.actions$.pipe(
ofEntityType("Hero"),
ofEntityOp([EntityOp.SAVE_DELETE_ONE_ERROR]),
map(action => {
const id = action.payload.data.originalAction.payload.data;
const options: EntityActionOptions = {
// tried various values
}
return new EntityActionFactory().create( <-----------------------dispatch UNDO_ONE action-----------
"Hero",
EntityOp.UNDO_ONE,
id,
options
);
})
);
});
在这里,我做了一个乐观删除,在一个SAVE_delete_ONE_错误中,通过一个effect发送一个UNDO_ONE操作
当我将UNDO\u ONE换成UNDO\u ALL
changeState
时,会返回到{}
,这让我觉得changeState
应该返回到{}
,因为我们正在取消删除操作。根据文档,它应该:
撤消操作根据changeState映射中的信息替换集合中的实体,将其还原为上次已知的服务器端状态,并将其从changeState映射中删除。这些实体变得“不变”
为了克服这个问题,您可以创建一个metaReducer,它删除撤消操作后changeState中剩余的相关修改。以下是我的entity-metadata.ts的内容以及相关的metareducer
从'@ngrx/data'导入{EntityMetadataMap,EntityDataModuleConfig,EntityCache};
从'@ngrx/store'导入{MetaReducer,ActionReducer,Action};
常量entityMetadata:EntityMetadataMap={};
常量pluralNames={};
const objectwithoutproperty=(对象,键)=>{
const target={};
用于(obj中的常数i){
如果(keys.indexOf(i)>=0){continue;}
如果(!Object.prototype.hasOwnProperty.call(obj,i)){continue;}
目标[i]=obj[i];
}
回报目标;
};
函数revertStateChanges(reducer:ActionReducer):ActionReducer{
返回(状态、操作:任意)=>{
if(action.type.includes('@ngrx/data/undo one')){
//请注意,如果要添加回失败的删除,则需要首先执行reducer
状态=减速器(状态、动作);
const updatedChangeState=objectWithoutProperties(状态[action.payload.entityName].changeState[action.payload.data.toString());
常量updatedState={
……国家,
[action.payload.entityName]:{
…状态[action.payload.entityName],
changeState:updatedChangeState
}
};
返回减速机(更新状态、操作);
}
返回减速器(状态、动作);
};
}
const EntityCacheMateReducers:MetaReducer[]=[revertStateChanges];
导出常量entityConfig:EntityDataModuleConfig={
实体元数据,
复数名,
全切还原剂
};代码>@Mickers你没有抓住问题的重点@ngrx/data在使用其DefaultDataService时会执行一些开箱即用的操作(保存删除一个、保存删除一个、错误保存删除一个、成功保存删除一个),例如我提交了一份请购单。当我有机会的时候,我会详细查看这个答案,看看作为一个临时的解决方案,这是多么可行。
EntityActionFactory.create<P = any>(entityName: string, entityOp: EntityOp, data?: P, options?: EntityActionOptions): EntityAction<P>