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

ReactJS - Replacing Redux with RxJS

ReactJS - Replacing Redux with RxJS

Avatar for Jarl André Hübenthal

Jarl André Hübenthal

March 05, 2017
Tweet

More Decks by Jarl André Hübenthal

Other Decks in Programming

Transcript

  1. React + Redux My experience from using Redux: No simple

    way for cancelling promises Most features require redux-[feat] dependency redux-thunk, redux-observable, redux-logger etc. The 1000 dependencies hell.
  2. React + RxJS Still based on the ux pattern Functional

    reactive programming map, atMap, switchMap, lter, scan, do Possible to emulate redux single store or Go multi store powerful testing with Marble tests
  3. React + RxJS // counterStore.js export const inc$ = new

    Subject().map( () => (count) => count + 1 ); export const dec$ = new Subject().map( () => (count) => count - 1 ); export const counter$ = ( actions = { inc$, dec$ } ) => createStore( 'counter', Observable.merge(actions.inc$, actions.dec$), Observable.of(0) ); export default counter$();
  4. React + RxJS // CounterComponent.jsx const Counter = (props) =>

    ( <div> <span>{props.counter}</span> <button onClick={props.inc}>Increase</button> <button onClick={props.dec}>Decrease</button> </div> );
  5. React + RxJS // CounterContainer.js import counter$, { inc$, dec$

    } from './counterStore'; import inject from 'react-rxjs/dist/RxInject'; const data = { counter$ }; const commands = { inc$, dec$ }; export default inject(data, commands)(Counter);
  6. React + RxJS const inc = '-xxx--xx---'; const dec =

    '----yy--yyy'; const expected = '01232123210'; const expectedStateMap = {...}; const inc$ = testScheduler.createHotObservable(inc); const dec$ = testScheduler.createHotObservable(dec); const counter$ = createCounter({ inc$, dec$ }); testScheduler.expectObservable(counter$).toBe( expected, expectedStateMap ); testScheduler.flush();