Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fuck redux! The true story about “Replacing Re...
Search
Jarl André Hübenthal
September 14, 2017
Programming
0
210
Fuck redux! The true story about “Replacing Redux with RxJS”
JavaZone 2017 lightning talk
Jarl André Hübenthal
September 14, 2017
Tweet
Share
More Decks by Jarl André Hübenthal
See All by Jarl André Hübenthal
ReactJS - Replacing Redux with RxJS
jarlah
0
120
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
5つのアンチパターンから学ぶLT設計
narihara
1
170
Porting a visionOS App to Android XR
akkeylab
0
460
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Being A Developer After 40
akosma
90
590k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Ace a Technical Interview
jacobian
278
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Transcript
Fuck redux! The true story about “Replacing Redux with RxJS”
JavaZone 2017
About us! Ingar Abrahamsen @ingarabr Jarl André Hübenthal @jarlandreh
What we had to work with React / redux /
redux middlewares / websockets / server side render / <insert npm package x, y and z>
Reactive streams RxJS
Our new hipster stack! Flow / React / RxJS /
Lodash
None
Show us some code! Counter example https://github.com/jarlah/react-rxjs-example/tree/v0.1
// @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> ); }
// @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$ });
// @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);
// @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(); }); });
Conclusion Keep it simple, stupid (KISS) Single responsibility principle