Going beyond rx-react

gistfile1.js

import {FuncSubject} from 'rx-react';
import {Observable} from 'rx';

/**
 * Component are just expressed with single function that return an 
 * RxReact Component instance, instead of taking the props object
 * as argument, they take an observable of props.
 * 
 * By default *shouldComponentUpdate* is the one from PureRenderMixin
 */
function TodoList(propStream) {
  const filterChange = FuncSubject.create();
  
  const filter = (
    Observable.of('')
    .concat(
      filterChange
      .map(({target}) => target.value)  
    )
  )
  
  const stateStream = Observable.combineLatest(
    [propStream, filter]
    ({todos}, filterValue) => {
      todos = filterValue.length < 3? 
        todos : 
        todos.filter(todo => todo.title.indexOf(filterValue) !== -1)
      ;
      return { todos }
    }
  )
  
  /**
   * render is just a pure function : (props, state) => ReactElement 
   */
  function render(props, {todos}) {
    return (
      <div>
        <input onChange={filterChange} />
        <ul>{
          todos.map(todo => (
            <li>todo.title</li>
          ))
        }</ul>
      </div>
    )
  }
  
  return { stateStream, render }
}

/**
 * Simple Component are just expressed as a pure render function
 * By default *shouldComponentUpdate* is the one from PureRenderMixin
 */
function App(todos) {
  return <TodoList todos={todos} />;
}