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
Redux PINGPONG
Search
yutasuzuki
June 03, 2017
Programming
0
130
Redux PINGPONG
Nagoya.jsの飛び入りで発表させていただいた資料です。
自分の所感です。
yutasuzuki
June 03, 2017
Tweet
Share
More Decks by yutasuzuki
See All by yutasuzuki
ECMAScript Promise
yutasuzuki
1
230
Other Decks in Programming
See All in Programming
エンターテイメント業界で利用されるAWS
demuyan
0
200
PostmanでAPIの動作確認が楽になった話
h455h1
0
120
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.5k
受託開発でGitLab CI を活用していく
xiombatsg
1
270
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Design by the Numbers
sachag
274
18k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Typedesign – Prime Four
hannesfritz
36
2k
Thoughts on Productivity
jonyablonski
57
3.8k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Producing Creativity
orderedlist
PRO
336
39k
What's new in Ruby 2.0
geeforr
337
31k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Transcript
3FEVY1*/(10/(
None
ࢼͨ͠ϥΠϒϥϦ w SFEVYUIVOL w SFEVYTBHB w SFEVYPCTFSWBCMF
5SFOET
ࠓճ࡞ͬͨͷ ΫϦοΫ͢Δͱ1*/(Λมߋɻ̎ඵޙʹ10/(Λݩʹ͢ɻ
جຊతͳDPEF import { createAction } from 'redux-actions'; export const PONG
= 'PONG'; export const pong = createAction(PONG); export const PING = 'PING'; export const ping = createAction(PING); import { combineReducers } from 'redux' import { PONG, PING } from '../actions/' const reducer = (state = false, action) => { switch (action.type) { case PONG: return state = false break; case PING: return state = true default: return state } }; const reducers = combineReducers({ isPingPong: reducer }); export default reducers BDUJPOKT SFEVDFSKT
SFEVYUIVOL
SFEVYUIVOLͱ w 3FEVYᴈ໌ظ͔Β͍ΔϥΠϒϥϦɻ w ࡞ऀಉ͡ͳͷͰɺ΄΅ެࣜɻ w "DUJPOʹඇಉظͷϩδοΫΛԡ͠ࠐΜͰ͍͘ελΠϧɻ
SFEVYUIVOL import { createAction } from 'redux-actions' export const SYNC_EVENT
= 'SYNC_EVENT' export const syncEvent = createAction(SYNC_EVENT) export const ASYNC_EVENT = 'ASYNC_EVENT' export const asyncEvent = createAction(ASYNC_EVENT) export function asyncPingPong() { return (dispatch) => { dispatch(ping()) setTimeout(() => { dispatch(pong()) }, 2000) } } const mapDispatchToProps = (dispatch) => { return { onClickHandler: () => { dispatch(asyncPingPong()) } } } BDUJPOKT DPOUBJOFSKT
SFEVYUIVOLͷײ w "DUJPO$SFBUPS"DUJPOΦϒδΣΫτΛੜ͢Δ͚ͩʹ͍ͨ͠ɻ w ϥΠϒϥϦ͕ܰྔͳͷͰɺཧղ͍͢͠ɻ ࣮࣭ߦ͔͠ͳ͍ w ࠷ϝδϟʔͳ3FEVYͷඇಉظϥΠϒϥϦͳͷͰɺࣄྫ͕ଟ͍ɻ w
ࠓճͬͨඇಉظϥΠϒϥϦͰɺҰ൪ϋʔυϧ͕͍ɻ w ෳࡶͳϩδοΫΛ͜͜ʹԡ͠ࠐΉͷɺݸਓతʹඍົɻ
SFEVYTBHB
SFEVYTBHBͱ w δΣωϨʔλؔΛ༻͠ɺඇಉظͷॲཧΛಉظతʹॻ͚ΔΑ͏ʹͳΔɻ w SFEVYͷॲཧ͔ΒNJEEMFXBSFΛ༻͍ͯɺผεϨουʹΓग़͢Πϝʔδɻ action reducer saga
SFEVYTBHB import { delay } from 'redux-saga' import { put,
takeEvery } from 'redux-saga/effects' import { ping, PONG } from '../actions' function* pingPongSaga() { yield delay(2000) yield put(ping()) } export function* rootSaga() { yield takeEvery(PONG, pingPongSaga) } TBHBKT
SFEVYTBHBͷײ w ීஈશ͍ͬͯ͘ͳ͍δΣωϨʔλؔΛ৮Δ͖͔͚ͬʹͳͬͨɻ w SFEVYUIVOLͷ"DUJPOԚછ͔Βղ์ɻ w νʔϜ։ൃʹಋೖ͢ΔͱͳΔͱɺશମతʹֶशίετߴΊͩͱࢥ͏ɻ
SFEVYPCTFSWBCMF
SFEVYPCTFSWBCMFͱ w 3FBDUJWF9 3FBDUJWF&YUFOTJPO Λ༻੍͍ͨޚ͕Ͱ͖Δɻ w NJEEMFXBSFͰ"DUJPOΛड͚औͬͯɺ"DUJPOΛฦ͢ॲཧΛ&QJDͱݺͿɻ w SYKTʹґଘ͍ͯ͠Δɻ w
ެࣜϖʔδΛݟΔͱ/FUqJYͷϓϩμΫτʹݟ͑Δɻ
SFEVYPCTFSWBCMF import { createEpicMiddleware } from ‘redux-observable' import 'rxjs/add/operator/delay' import
'rxjs/add/operator/mapTo' import { PING, pong } from '../actions' const epic = (action$) => { return action$.ofType(PING) .delay(2000) .mapTo(pong()) } const epicMiddleware = createEpicMiddleware( epic ) export default epicMiddleware FQJDKT
SFEVYPCTFSWBCMFͷײ w ࠷ۙͷ3YʓʓͳྲྀΕ͔Β͢ΔͱɺΔՁ͋Γͦ͏ɻ w ॲཧͷϑϩʔ͕ݟ͍͢ɻ w খ͍͞ϓϩμΫτʹSYKTΛೖΕΔͷԿͱͳ͘ؾ͕Ҿ͚Δɻ
·ͱΊ
·ͱΊʢݸਓͷओ؍ʣ w ݸਓతͳΈ SFEVYUIVOLSFEVYPCTFSWBCMFSFEVYTBHB w ϓϩμΫτͷαΠζ͕খ͚͞ΕUIVOL͏ͱࢥ͏ɻ w ·ͨผͷΞϓϩʔν͕ग़͖ͯͨΒࢼͯ͠Έ͍ͨɻ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ