浅谈前端响应式设计（二）

/*
const change$ = new Subject();
<Input change$={change$} />
<Search change$={change$} />
*/
class Input extends Component { state = {  value: '' };
 onChange = e => {  this.props.change$.next(e.target.value); };
 componentDidMount() {  this.subscription = this.props.change$.subscribe(value => {   this.setState({    value   });  }); }
 componentWillUnmount() {  this.subscription.ubsubscribe(); }
 render() {  const { value } = this.state;
  return <input value={value} onChange={this.onChange} />; }}
class Search extends Component { // ...
 componentDidMount() {  this.subscription = this.props.change$.subscribe(value => {   ajax(/* ... */).then(list =>    this.setState({     list    })   );  }); }
 componentWillUnmount() {  this.subscription.ubsubscribe(); }
 render() {  const { list } = this.state;
  return <ul>{list.map(item => <li key={item.id}>{item.value}</li>)}</ul>; }}

const withObservables = observables => ChildComponent => { return class extends Component {  constructor(props) {   super(props);   this.subscriptions = {};   this.state = {};   Object.keys(observables).forEach(key => {    this.subscriptions[key] = observables[key].subscribe(value => {     this.setState({      [key]: value     });    });   });  }
  onNext = (key, value) => {   observables[key].next(value);  };
  componentWillUnmount() {   Object.keys(this.subscriptions).forEach(key => {    this.subscriptions[key].unsubscribe();   });  }
  render() {   return (    <ChildComponent {...this.props} {...this.state} onNext={this.onNext} />   );  } };};

Observable.combineLatest(foo$, bar$) .pipe(   // ... );

class Foo extends Component { constructor(props) {  super(props);  this.subscription = Observable.combineLatest(foo$, bar$)   .pipe(    // ...   )   .subscribe(() => {    // ...   }); }
 componentWillUnmount() {  this.subscription.unsubscribe(); }}

foo$.map(event => event.target.value);

import { map } from 'rxjs/operators';
foo$.pipe(map(event => event.target.value));

input$.pipe(switchMap(keyword => Observable.ajax(/* ... */)));

input$.pipe(switchMap(keyword => fromPromise(search(/* ... */))));

combineLatest(foo$, bar$).pipe( switchMap(keyword => fromPromise(someAsyncOperation(/* ... */))));

input$.pipe( delay(5000) // 下游会在input$值到来后5秒才接到数据);

class View extends Component { state = {  input: '' };
 componentDidMount() {  this.subscription = input$.subscribe(input => {   this.setState({    input   });  }); }
 componentWillUnmount() {  this.subscription.unsubscribe(); }
 render() {  // ... }}

eventEmitter.emit('hello', 1);// ...eventEmitter.on('hello', function listener() {});

() => next => { const action$ = new Subject();
 return action => {  action$.next(action);  // ... };};

action$.pipe( ofType('ACTION_1'), switchMap(() => {  // ... }), map(res => ({  type: 'ACTION_2',  payload: res })));
action$.pipe( ofType('ACTION_3'), mergeMap(() => {  // ... }), map(res => ({  type: 'ACTION_4',  payload: res })));