search

acdlite / react-rx-component

Yet another RxJS library for React :) Create container components (also known as smart components) by transforming a sequence of props
82 stars 4 forks source link

readme

react-rx-component

DEPRECATED

This project has been superseded by rx-recompose.

build status npm version

Yet another RxJS library for React :)

Create smart components — also known as container components — using RxJS observables.

npm install --save react-rx-component rx

Don't setState() — transform props

React is all about state management. One of the biggest traps new React developers fall into is an over-reliance on setState() to construct big, complicated state machines. Components like that are fragile, error-prone, and fail to take full advantage of React's powerful data flow model. Instead, it's best to minimize local component state and use derived data, in the form of props, wherever possible.

A common strategy is to separate your app into smart and dumb components. Smart components take care of state management, subscriptions, and other messy stuff, then pass props along to its children. The children are dumb components, which have no state, and merely return elements for given props.

react-rx-component lets you create "stateful" smart components without ever using setState().

Using the RxJS library, transform an observable sequence of props received from the owner into a sequence of props to be passed to children. This is the essence of what all smart components do — take some props from the owner, combine it with some local state, and sanitize the result by passing it down as nice, clean props.

To illustrate, let's compare how to create a simple counter the normal way and with react-rx-component.

First, the normal way. We'll follow best practices by separating our counter into smart and dumb components:

class CounterContainer extends React.Component {
  state = { count: 0 }

  handleIncrement = () => {
    this.setState(state => ({
      count: state.count + 1
    }));
  }

  render() {
    return (
      <Counter
        {...this.props}
        count={this.state.count}
        increment={this.handleIncrement} />
    );
  }
}

class Counter extends React.Component {
  render() {
    return (
      <div>
        {props.count}
        <button onClick={increment}>+</button>
      </div>
    );
  }
}

And now let's implement this same functionality with react-rx-component. Inline comments show how certain parts correspond to the normal version:

const CounterContainer = createRxComponent(props$ => {
  const increment$ = funcSubject(); // handleIncrement
  const count$ = increment$
    .startWith(0) // state = { count: 0 }
    .scan(count => count + 1); // this.setState((state) => ({ count: count + 1 }))

  return Observable.combineLatest(props$, count$, (props, count) => ({
    ...props,
    increment: increment$,
    count
  }));
}, Counter);

// In a future version of React, pure functions like this are valid components
// https://github.com/facebook/react/pull/3995
function Counter(props) {
  const { count, increment, ...rest } = props;
  return (
    <div {...rest}>
      {props.count}
      <button onClick={increment}>+</button>
    </div>
  );
}

funcSubject() is a neat trick borrowed from rx-react. It creates an observable sequence that can be used like a callback function. The value sent to the function is added to the sequence. Here, we're using it as a click handler.

As you can see, the entirety of React's state API can be expressed in terms of observable operators.

Other benefits include:

API

import { createRxComponent, funcSubject } from 'react-rx-component';

createRxComponent(mapProps)

createRxComponent(mapProps, render)

createRxComponent(mapProps, Component)

Creates a React Component or a higher-order component. Use this instead of React.createClass() or extending React.Component.

mapProps() is a function that maps an observable sequence of props to a sequence of child props, like so:

props$ => childProps$

NOTE mapProps() also receives a sequence of contexts as the second parameter.

createRxComponent() can be passed a render function or a React component. A render function is a function that maps child props to a React element:

props => vdom

Passing a React component is effectively the same as passing a render function that looks like this:

props => <Component {...props} />

The resulting component is a subclass of React.Component, so you can set propTypes and contextTypes like normal.

Alternatively, you can choose to omit the second parameter. In this case, a higher-order component is returned instead of a normal React component. E.g.

const higherOrderComponent = createRxComponent(mapProps);

class MyComponent extends React.Component {...}

export default higherOrderComponent(MyComponent);

You can also use it as a decorator:

@createRxComponent(mapProps)
export default class MyComponent extends React.Component {...}

Why the extra step? Why not return a sequence of vdom?

You may be wondering why we don't just combine the two steps and map directly from a sequence of props to a sequence of React elements. Internally, the separation allows us to prevent unnecessary renders using shouldComponentUpdate(). If the same set of props are broadcast multiple times, there are no extra renders.

funcSubject()

Creates an RxJS Subject that can be used like a callback function. It broadcasts the value of whatever it's called with. This is very handy for creating observable sequences from event handlers, like onClick() or onChange(). See the counter example above.

The idea for this function is borrowed from rx-react by @fdecampredon.

Comparison to other libraries