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
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Team operations that are not burdened by SRE
kazatohiei
1
310
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Goで作る、開発・CI環境
sin392
0
230
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Gamification - CAS2011
davidbonilla
81
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for Performance
lara
610
69k
A better future with KSS
kneath
238
17k
The Language of Interfaces
destraynor
158
25k
Music & Morning Musume
bryan
46
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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