Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Yet another side effect layer for Redux
Daisuke Mino
April 24, 2018
Programming
2
2.4k
Yet another side effect layer for Redux
Daisuke Mino
April 24, 2018
Tweet
Share
More Decks by Daisuke Mino
See All by Daisuke Mino
複雑なコンポーネントで 状態をもつのをやめた話
minodisk
0
84
io.Writerで学ぶGoのインターフェース
minodisk
0
210
Goのエラーハンドリング
minodisk
0
170
Other Decks in Programming
See All in Programming
Independently together: better developer experience & App performance
bcinarli
0
180
模組化的Swift架構(二) DDD速成
haifengkao
0
390
Node.jsデザインパターンを読んで
mmmommm
0
2.6k
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
180
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
VisualProgramming_GoogleHome_LINE
nearmugi
1
230
GitHub Actions を導入した経緯
tamago3keran
1
430
Android Compose Component - mapping.
taehwandev
0
140
git on intellij
hiroto_kitamura
0
170
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
140
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
430
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
A designer walks into a library…
pauljervisheath
196
16k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Navigating Team Friction
lara
175
11k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Side Projects
sachag
450
37k
Transcript
Yet another side effect layer for Redux Scramble! #1 @minodisk
Redux͕Δ͜ͱ άϩʔόϧεςʔτΛҡ࣋͢ΔͨΊͷ࣮ • Connector • Dispatcher • Reducer • Store
Redux͕Βͳ͍͜ͱ ෭࡞༻ͷ͋ΔॲཧΛॻ͘ॴͷఏڙ • APIτϥοΩϯά༻ϝιουͷίʔϧ • Local StorageCookieͷΞΫηε • ReactΞϓϦέʔγϣϯ֎ͷDOMૢ࡞
Ͳ͜ͰΔ͔ʁ େ͖͚͘Δͱ͜Μͳൊ͕͋Γͦ͏ • ComponentͰΔ • ActionൃߦલʹΔ redux-thunk • ActionൃߦޙɺReduceલʹΔ redux-saga
Ͳ͜ͰΔ͔ʁ • ComponentͰΔͷ֎ • redux-thunkActionΛDispatch͢Δͷ͔ Action DispatcherΛDispatch͢Δͷ͔౷Ұײ͕ ͳ͍ίʔυʹͳͬͯ͠·͏ • redux-sagaผϨΠϠʔͰΔͷͰɺ
֤ϨΠϠʔ͕ͦΕͧΕͷʹूதͰ͖Δ
redux-sagaͷΑ͞ • ֤ϨΠϠʔ͕ࣗͷʹूதͰ͖Δ • ViewActionΛൃߦ͢Δ͚ͩ • ෭࡞༻ϨΠϠʔͰActionΛड͚औΓɺ ActionΛൃߦ͢Δ͚ͩ • ActionͷTypeΛϑοΫͯ͠ॲཧΛࣗ༝ʹॻ͚Δ
redux-sagaͷͭΒΈ • Generatorਏ͍ • ςετਏ͍ • Effectsؔਏ͍
ສೳނͷਏΈ • GeneratorͳΒશͯͷ͜ͱ͕Ͱ͖Δ͔͠Εͳ ͍ • ݱ࣮ʹҰൠతͳWebΞϓϦέʔγϣϯͰॻ͘ ॲཧͷ99%Async/Await/Promise.allͰͬ ͍͚ͯΔ୯७ͳίʔυ • 1%ΛຒΊΔͨΊʹෳࡶੑ͕ۃ·ͬͯΔ
Զୡ͕ཉ͔ͬͨ͠ͷ
Image by www.projectcartoon.com / CC BY 3.0
࡞ͬͨ
redux-spork
Spork is Կ?
Spoon x Fork Image by Wtshymanski at English Wikipedia /
CC BY-SA 3.0
Specifications • action.typeΛΩʔʹcallbackΛొ͢Δ • callbackͨͩͷfunctionͰɺasyncʹͰ͖Δ • callbackʹ͞ΕΔdispatchϝιουͰผactionΛൃߦ • ൃߦ͞Εͨaction࠶ϑοΫ͞Εcallback͕ݺΕΔ •
1-action:N-callback, N-action:1-callback
Fork
Component Reducer Action
Component Reducer Fork Action
Component Reducer Fork Action Action Dispatch
Component Reducer Fork Action Action Dispatch Action
Component Reducer Fork Action Action Dispatch Fork
Component Reducer Fork Action Action Dispatch
Component Reducer Fork Action Action Dispatch
Component Reducer ORDER USER_FETCH USER_FETCHED
Merge
Component Reducer ORDER Merge USER_FETCH USER_FETCHED
͜Μͳ͔Μ͡ 1 fork('ORDER', async (action, dispatch) => {¬ 2 dispatch({
type: 'USER_FETCH', action.payload.userID })¬ 3 const { payload } = await merge('USER_FETCHED')¬ 4 const resp = await fetch(`/api/orders`, {¬ 5 method: 'POST',¬ 6 body: JSON.stringify({ productID: action.payload.productID }),¬ 7 })¬ 8 dispatch({ type: 'ORDERED', payload: JSON.parse(resp.body) })¬ 9 })
ͱ͜ΖͰ
redux-observable ʹࢥ͕ࣅͯΔΑͶʁ
Spork Image by Wtshymanski at English Wikipedia / CC BY-SA
3.0
Observable Image by Dave Taylor at Flickr / CC BY
2.0
·ͱΊ • ϨΠϠʔ͕Γ͚ΒΕΔ • ͷ • γϯϓϧ • Async/AwaitͰ͍͖ͬͯ
Repository • https://github.com/folio-sec/redux-spork • https://www.npmjs.com/package/redux- spork
͝ਗ਼ௌ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·ͨ͠