RxJS承诺在转换函数中返回

Question

我玩https://github.com/corasla/angular2-tackling-state-rxjs。这是本文https://vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02#.s1otnz6en中使用RxJS的角度状态管理器的实现。我想知道如何在reducer中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;
    }

Answer 1

我使用了Victor Savkin的相同解决方案，并用承诺制定了2个国家管理概念：

解决方案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));

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

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

<强>组件：

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毫秒的短暂延迟。

保持你的减速器纯净！

在我看来，添加额外的动作创建器以保持Reducer纯净是非常有帮助的。如果你的减速器是纯净的，它们很容易测试而不需要嘲笑。动作创建者处理异步任务。 Read this article如果您需要有关纯函数或Redux documentation的更多信息。