Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Plugins with React & Challenges with Data

Plugins with React & Challenges with Data

A look at how React enables plugins and the challenges in data management this poses. We look at our experiences with Flux, Redux, and Rx.JS based observables.

Given at the ReactJS San Francisco Bay Area meetup

Evan Morikawa

May 19, 2016
Tweet

More Decks by Evan Morikawa

Other Decks in Programming

Transcript

  1. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  2. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  3. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  4. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  5. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })
  6. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })