Fuck redux! The true story about “Replacing Redux with RxJS”

JavaZone 2017 lightning talk

Transcript

1. Fuck redux! The true story about “Replacing Redux with RxJS” JavaZone 2017
2. About us! Ingar Abrahamsen @ingarabr Jarl André Hübenthal @jarlandreh
3. What we had to work with React / redux / redux middlewares / websockets / server side render / <insert npm package x, y and z>
4. Reactive streams RxJS
5. Our new hipster stack! Flow / React / RxJS / Lodash
7. Show us some code! Counter example https://github.com/jarlah/react-rxjs-example/tree/v0.1
8. // @flow import React from 'react'; export type Props = { state: number, increase: (n: number) => mixed , decrease: (n: number) => mixed }; export function CounterPage(props: Props) { return ( <div className="container"> <h1>Counter</h1> <p>{props.state}</p> <button onClick={() => props.increase(1)}>+</button> <button onClick={() => props.decrease(1)}>-</button> </div> ); }
9. // @flow import { Observable, Subject } from 'rxjs'; import { createStore } from 'react-rxjs/dist/RxStore' ; type Number = { n: number }; export const increase$: Subject<Number> = new Subject(); export const decrease$: Subject<Number> = new Subject(); const reducer$ = (actions: *) => Observable. merge( actions.increase$.map(number => state => state + number.n) , actions.decrease$.map(number => state => state - number.n) ); export const store = (actions: *) => createStore('counter', reducer$(actions), 0); export default store({ increase$, decrease$ });
10. // @flow import store$, { decrease$, increase$ } from './store'; import inject from 'react-rxjs/dist/RxInject' ; import { CounterPage } from './view'; function props(state) { return { state, increase: n => increase$.next({ n }) , decrease: n => decrease$.next({ n }) }; } export default inject(store$, props)(CounterPage);
11. // @flow import { store } from '../store'; import { TestScheduler } from 'rxjs/Rx'; describe('counter store', () => { it('increase and decrease', () => { const ts = new TestScheduler((a, b) => expect(a).toEqual(b)); const streams = { inc: '-ab--', dec: '---ab', res: 'abcde' }; const n = { n: 1 }; const increase$ = ts.createHotObservable(streams.inc, { a: n, b: n}); const decrease$ = ts.createHotObservable(streams.dec, { a: n, b: n}); const resultMap = { a: 0, // init b: 1, c: 2, // inc d: 1, e: 0 // dec }; ts.expectObservable(store({ increase$, decrease$ })).toBe(streams.res, resultMap); ts.flush(); }); });
12. Conclusion Keep it simple, stupid (KISS) Single responsibility principle