Question

我试图在我的Angular应用程序中实现撤消操作，我使用@ngrx/store。我希望能够做的是派遣UNDO操作，然后一旦处理完行动，数据已经由reducer更新并被推送到商店，我想用更新的数据做点什么。

以下是我目前正试图解决这个问题的方法。基本上，因为记录$来自BehaviorSubject，我最初会在订阅上获得一个值。然后我发送动作并等待更新通过。必须有更好的方法，对吗？

undoRecords() {
    let count = 1;
    // The records$ observable comes from the ngrx store
    let obs = this.records$.take(2).subscribe(records => {
        if(count == 1) {
            this.store.dispatch({type: UNDO_RECORDS, payload: undefined}); // this will change the records 
            count++;
        }
        else {
            this.someService.doSomething(records);
        }
    });
}

Answer 1

我通常做的是有三个动作： ACTION，ACTION_SUCCESS，ACTION_ERROR。

如果您有兴趣跟踪进度，

ACTION会触发实际操作，同时更改商店中的状态（inprogress = true）。

ACTION_SUCCESS，将状态＆＃39; inprogress＆＃39;为假。并更新实际数据。

您可以监控进行中状态，并且您将知道任务何时完成。

Answer 2

使用npm包ngrx-undo。

 npm install --save ngrx-undo

你的AppModule中的

：

import {handleUndo, configureBufferSize} from 'ngrx-undo';

// if you want to update the buffer (which defaults to 100)
configureBufferSize(150);

@NgModule({
    imports: [
        // pass the handleUndo in the metaReducers
        StoreModule.provideStore(rootReducer, {metaReducers: [handleUndo]}) 
    ]
})
export class AppModule { }

要撤消操作，只需使用撤消操作创建者。

import {undo} from "ngrx-undo";

// create an action
let action = {type: REMOVE_WINE, payload: {id: wine.id}};

// dispatch it
this.store.dispatch(action);

// undo the action
this.store.dispatch(undo(action));

看看here。

ngrx - 一旦调度操作成功更新商店后如何执行操作？

2 个答案: