小编dea*_*xes的帖子

所以我刚开始尝试学习rxjs并决定在我正在使用React工作的UI上实现它(我有时间这样做,所以我去了).然而,我仍然很难绕过它的实际工作方式......不仅仅是"基本"的东西,比如何时实际使用Subject以及何时使用Observable,或者何时只使用React的本地状态,还要如何连锁方法等.虽然这太宽泛了,所以这就是我遇到的具体问题.

假设我有一个UI,其中有一个过滤器(按钮)列表都是可以解决的.任何时候我点击其中一个我想要,首先,确保后面的操作将去抖(以避免太快和太频繁地发出网络请求),然后我想确保如果它被点击(它将被推入一个数组,如果它再次被点击,它将离开数组.现在,此数组最终应包含当前单击或选中的所有按钮(过滤器).

然后,当去抖动时间结束时,我希望能够使用该数组并通过Ajax将其发送到我的服务器并用它做一些事情.

import React, { Component } from 'react';
import * as Rx from 'rx';

export default class CategoryFilter extends Component {
 constructor(props) {
    super(props);

    this.state = {
        arr: []
    }

    this.click = new Rx.Subject();
    this.click
    .debounce(1000)
    // .do(x => this.setState({
    //  arr: this.state.arr.push(x)
    // }))
    .subscribe(
       click => this.search(click),
       e => console.log(`error ---> ${e}`),
       () => console.log('completed')
    );
 }

search(id) {
    console.log('search --> ', id);
    // this.props.onSearch({ search });
}

clickHandler(e) {
    this.click.onNext(e.target.dataset.id);
}

render() {
    return ( …

我正在使用Angular 2的http服务来获取一些数据,API返回'n'个结果,但我只想处理'x'数量.

考虑到我无法访问API的端点(为了创建limit或findOne类方法),我正在尝试找出最好的方法来处理将返回给调用我的组件的结果数量HomeService的"loadLatest"方法.

在这个特定的例子中,响应是一个看起来像这样的对象:

{
 success: true,
 data: [Object, Object, Object],
 user: 'testUser'
}

我只对数据数组感兴趣(比如,只获取它包含的前两个对象).

如果我想得到一个结果,我可以这样做:

import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

const URL = 'http://exampleapi.com/example';

@Injectable()
export class HomeService {
 constructor(private _http: Http){}

 loadLatest() {
  return this._http.get(URL)
  .map(res => res.json())
  .map(({data}) => data[0]);
 }
}

它起作用(这并不一定意味着它确实没问题)......但是,我知道必须有一种更好的方法来返回,例如,响应对象中数据数组中的前两个对象.或前三个,或四个...或者我想要的多少.

我读到了关于"take"的方法,但我不相信它会在这种情况下真正起作用......

这是我订阅它并在我的组件中使用服务的地方:

import { Component, OnInit } from '@angular/core';
import { HomeService } from './home.service';
import { Observable …