我在我的 Angular 项目中使用 Redux Offline,现在我想在离线模式下取消发件箱中的项目。基本上,我只想过滤发件箱数组以删除要取消/修改的项目。
我的问题是我在顶级化简器中收到的状态中缺少(未定义(。我可以在Redux Dev工具中离线查看,也可以通过NgRedux.select((和NgRedux.getState((获取它。
是否有原因导致 redux 脱机在化简器中收到的状态中不存在?我可以添加它,然后通过化简器更改它吗?还是有其他人可以访问和修改发件箱?
package.json:
"dependencies": {
"@angular-redux/router": "^7.0.0",
"@angular-redux/store": "^9.0.0",
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/pwa": "^0.6.7",
"@angular/router": "^6.0.3",
"@angular/service-worker": "^6.0.3",
"@redux-offline/redux-offline": "^2.3.3",
"core-js": "^2.5.7",
"reduce-reducers": "^0.3.0",
"redux": "^4.0.0",
"redux-observable": "1.0.0-alpha.2",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2",
"@angular-devkit/build-angular": "^0.6.7",
"@angular/cli": "^6.0.7",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.10.18",
"codelyzer": "^4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"opn-cli": "^3.1.0",
"protractor": "^5.3.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
如果您需要更多信息,请写评论。
redux-offline
动态注入它自己的化简器,因此您将无法通过顶级化简器访问它。redux-offline
通过配置公开其队列,这将允许您更新发件箱以删除/添加操作。如果您想在用户离线时删除离线操作,我建议您使用特定操作类型进行离线操作调用(例如'CANCEL_OFFLINE_ACTION'
(,并在queue.enqueue
中处理它,以删除发件箱中您不想传播的操作。
下面是一个粗略的示例:
// the action to dispatch
const action = {
type: 'CANCEL_OFFLINE_ACTION',
payload: {
id: 123,
},
meta: {
offline: {
effect: {
url: ''
},
},
},
};
// the custom enqueue action
function enqueue(outbox, incomingAction) {
return incomingAction.type !== 'CANCEL_OFFLINE_ACTION' ? [...outbox, incomingAction] :
outbox.filter(
outboxAction => outboxAction.payload.id !== incomingAction.payload.id,
);
}