javascript - angular2/rxjs/redux 重新实现 - 路线更改与可观察的困惑

Question

我正在尝试在 angular2 应用程序中的 rxjs 中对 redux 进行基本的重新实现。

此时，它基本上只是我在互联网上找到的一些内容拼接在一起的，this plunker对于 Angular DI，this for file structure , this for combineReducers最后this for "redux in rxjs" .

我遇到了几个问题，但这是目前最大的问题: https://www.youtube.com/watch?v=xXau87UmqOs

发生了什么:

• 我有两个组件，index 和 todos 每个组件都有一个路由
• 在索引中我只显示待办事项列表
• 在待办事项中我可以删除并添加新的待办事项
• 当我在路线之间切换而不添加新待办事项或删除待办事项时，一切正常
• 当我添加或删除待办事项时，它仍然有效，附加新待办事项，删除旧待办事项，console.log 中的数据看起来很好
• 当我在待办事项中添加或删除后转到不同的路线时，observable成为我调用的最后一个 redux 操作，例如 Object {type: "DELETE_TODO", id: 1} 而不是 todos 数组

这是我在 console.log 中描述的内容(也可以在 YouTube 视频中看到)

---- index loaded ----
index.js:33 map in index: Object {todos: Array[3]}
index.js:35 resp in index: Object {todos: Array[3]}
index.js:38 ---- index destroyed ----
todos.js:31 ---- todos loaded ----
todos.js:33 map in todos: Object {todos: Array[3]}
todos.js:35 resp in todos: Object {todos: Array[3]}
todos.js:45 ---- todos destroyed ----
index.js:30 ---- index loaded ----
index.js:33 map in index: Object {todos: Array[3]}
index.js:35 resp in index: Object {todos: Array[3]}
index.js:38 ---- index destroyed ----
todos.js:31 ---- todos loaded ----
todos.js:33 map in todos: Object {todos: Array[3]}
todos.js:35 resp in todos: Object {todos: Array[3]}
NgStore.js:49 Object {type: "DELETE_TODO", id: 1}
todos.js:33 map in todos: Object {todos: Array[2]}
todos.js:35 resp in todos: Object {todos: Array[2]}
todos.js:45 ---- todos destroyed ----
index.js:30 ---- index loaded ----
index.js:33 map in index: Object {type: "DELETE_TODO", id: 1}
index.js:35 resp in index: Object {type: "DELETE_TODO", id: 1}

你知道当路线改变时什么可能导致可观察的改变吗？

这是仓库 https://github.com/fxck/ng2-rx-redux它使用最新的 alpha(46)

Answer 1

您错误地使用了RxJS API。要修复您的代码，您应该执行以下两件事:

1. 将初始状态设置为 scan运算符。

// services/NgStore.ts

this._subject = new BehaviorSubject().scan(rootReducer, initialState);

更改 switch 语句中的条件以检查 action 是否为空(例如 === undefined):

// reducers/todo.ts

export const todos = (state = [], action) => {
  switch(action && action.type) {
    // ...
  }
};

PS对于那些不知道 Redux 已经在 RxJS 中实现的人，我不会删除我的第一个答案。