ReactJS - Replacing Redux with RxJS

Transcript

1. ReactJS Replacing Redux with RxJS Jarl André Hübenthal 7. mars 2017
2. Flux Unidirectional data ow
3. Redux Based on the ux pattern
4. 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.
5. My solution?
6. React + RxJS!
7. React + RxJS Much like ux
8. 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
9. 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$();
10. 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> );
11. 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);
12. 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();