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

Fuck redux! The true story about “Replacing Re...

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

JavaZone 2017 lightning talk

Avatar for Jarl André Hübenthal

Jarl André Hübenthal

September 14, 2017
Tweet

More Decks by Jarl André Hübenthal

Other Decks in Programming

Transcript

  1. What we had to work with React / redux /

    redux middlewares / websockets / server side render / <insert npm package x, y and z>
  2. // @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> ); }
  3. // @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$ });
  4. // @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);
  5. // @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(); }); });