【问题标题】：RxJS promise return in transforming functionRxJS 承诺在转换函数中返回
【发布时间】：2016-11-13 18:49:08
【问题描述】：

我玩那个 https://github.com/corasla/angular2-tackling-state-rxjs 。这是本文https://vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02#.s1otnz6en 中使用 RxJS 的 Angular 状态管理器的实现。我想知道这里的减速器如何https://github.com/corasla/angular2-tackling-state-rxjs/blob/master/src/app/shared/stateAndDispatcher.ts#L92

（代码片段）

function filter(initState: string, actions: Observable<Action>): Observable<string> {
 return actions.scan((state, action) => {
   if (action instanceof SetVisibilityFilter) {
     return action.filter;
   } else {
     return state;
   }
 }, initState);

}

例如向 api 发出请求并将请求中的值发送回 observable？返回承诺并没有解决问题

编辑：我会这样做：

    if (action instanceof SetVisibilityFilter) {
        return new Promise(resolve=>setTimeout(()=> action.filter = 'Async', 100));
    } else {
        return state;
    }

【问题讨论】：

你能展示你的尝试吗？我不明白你想要完成什么。
好的，我编辑了问题
You're Promise 用法没有意义，需要在某个时候解决。

标签： angular promise rxjs

【解决方案1】：

我使用了 Victor Savkin 的相同解决方案，并制定了 2 个带有 Promise 的状态管理概念：

解决方案 1

我创建了一个额外的action creator 来添加待办事项。

AddTodoAction：

export class AddTodoAction {
    constructor(public todoId: number, public text: string) { }
}

动作创建者：

import { AddTodoAction } from './todos.actions';

export function addTodo(text: string) {
    return delay(500).then(() => {
        return new AddTodoAction(Date.now(), text);
    });
}

const delay = (ms: number) =>
    new Promise(resolve => setTimeout(resolve, ms));

动作创建者只是称为“addTodo”。它返回一个 Promise 并有 500 毫秒的延迟。延迟是“真实”服务器连接的占位符。稍后您可以将其替换为对服务器的异步调用或类似的东西。

在您注入调度程序的组件中，您必须导入此操作创建者并在.then 中调用dispatcher.next。

组件：

export class AddTodoComponent {
    constructor( @Inject(dispatcher) private dispatcher: Observer<TodoAction>) { }

    addTodo(input: HTMLInputElement) {
        let value = input.value;
        input.value = '';

        actionCreators.addTodo(value).then(action => {
            this.dispatcher.next(action);
        });
    }
}

所以现在动作创建者可以对服务器进行一些异步调用。当动作创建者解析 Promise 时，您可以将通过 Promise 解析的动作用于调度程序。

解决方案 2

如果您将类中的动作创建者实现为服务，您可以在其中注入调度程序，并且动作创建者能够直接调度动作。

动作创建者服务：

@Injectable()
export class TodoActionCreators {
    constructor( @Inject(dispatcher) private dispatcher: Observer<TodoAction>) { }

    addTodo(text: string) {
        return delay(500).then(() => {
            this.dispatcher.next(new AddTodoAction(Date.now(), text))
        });
    }
}

组件：

export class AddTodoComponent {
    constructor(private todoActionCreators: TodoActionCreators) { }

    addTodo(input: HTMLInputElement) {
        let value = input.value;
        input.value = '';

        this.todoActionCreators.addTodo(value);
    }
}

看看它的工作原理：

添加的待办事项有 500 毫秒的短暂延迟。

保持你的减速器纯净！

在我看来，添加额外的 action creators 来保持 reducer 的纯净是非常有帮助的。如果你的 reducer 是纯的，它们很容易在没有 mock 的情况下进行测试。动作创建者处理异步任务。 Read this article 如果您需要有关纯函数的更多信息或Redux documentation。

【讨论】：