Redux PINGPONG

Nagoya.jsの飛び入りで発表させていただいた資料です。
自分の所感です。

Transcript

1. 3FEVY
   1*/(10/(
3. ࢼͨ͠ϥΠϒϥϦ w SFEVYUIVOL
   w SFEVYTBHB
   w SFEVYPCTFSWBCMF
4. 5SFOET
5. ࠓճ࡞ͬͨ΋ͷ ΫϦοΫ͢Δͱ1*/(Λมߋɻ̎ඵޙʹ10/(Λݩʹ໭͢ɻ
6. جຊతͳ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
7. SFEVYUIVOL
8. SFEVYUIVOLͱ͸ w 3FEVYᴈ໌ظ͔Β͍ΔϥΠϒϥϦɻ
   w ࡞ऀ͸ಉ͡ͳͷͰɺ΄΅ެࣜɻ
   w "DUJPOʹඇಉظͷϩδοΫΛԡ͠ࠐΜͰ͍͘ελΠϧɻ
9. 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
10. SFEVYUIVOLͷײ૝ w "DUJPO
    $SFBUPS͸"DUJPOΦϒδΣΫτΛੜ੒͢Δ͚ͩʹ͍ͨ͠ɻ
    w ϥΠϒϥϦ͕௒ܰྔͳͷͰɺཧղ͠΍͍͢ɻ ࣮࣭ߦ͔͠ͳ͍
    w ࠷΋ϝδϟʔͳ3FEVYͷඇಉظϥΠϒϥϦͳͷͰɺࣄྫ͕ଟ͍ɻ
    w ࠓճ࢖ͬͨඇಉظϥΠϒϥϦͰ͸ɺҰ൪ϋʔυϧ͕௿͍ɻ
    w ෳࡶͳϩδοΫΛ͜͜ʹԡ͠ࠐΉͷ͸ɺݸਓతʹඍົɻ
11. SFEVYTBHB
12. SFEVYTBHBͱ͸ w δΣωϨʔλؔ਺Λ࢖༻͠ɺඇಉظͷॲཧΛಉظతʹॻ͚ΔΑ͏ʹͳΔɻ
    w SFEVYͷॲཧ͔ΒNJEEMFXBSFΛ༻͍ͯɺผεϨουʹ੾Γग़͢Πϝʔδɻ action reducer saga
13. 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
14. SFEVYTBHBͷײ૝ w ීஈશ͘࢖͍ͬͯͳ͍δΣωϨʔλؔ਺Λ৮Δ͖͔͚ͬʹͳͬͨɻ
    w SFEVYUIVOLͷ"DUJPOԚછ͔Βղ์ɻ
    w νʔϜ։ൃʹಋೖ͢ΔͱͳΔͱɺશମతʹֶशίετ͸ߴΊͩͱࢥ͏ɻ
15. SFEVYPCTFSWBCMF
16. SFEVYPCTFSWBCMFͱ͸ w 3FBDUJWF9 3FBDUJWF
    &YUFOTJPO Λ༻੍͍ͨޚ͕Ͱ͖Δɻ
    w NJEEMFXBSFͰ"DUJPOΛड͚औͬͯɺ"DUJPOΛฦ͢ॲཧΛ&QJDͱݺͿɻ
    w SYKTʹґଘ͍ͯ͠Δɻ
    w ެࣜϖʔδΛݟΔͱ/FUqJYͷϓϩμΫτʹݟ͑Δɻ
17. 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
18. SFEVYPCTFSWBCMFͷײ૝ w ࠷ۙͷ3YʓʓͳྲྀΕ͔Β͢Δͱɺ΍ΔՁ஋͸͋Γͦ͏ɻ
    w ॲཧͷϑϩʔ͕ݟ΍͍͢ɻ
    w খ͍͞ϓϩμΫτʹSYKTΛೖΕΔͷ͸Կͱͳ͘ؾ͕Ҿ͚Δɻ
19. ·ͱΊ
20. ·ͱΊʢݸਓͷओ؍ʣ w ݸਓతͳ޷Έ SFEVYUIVOL
    
    
    
    SFEVYPCTFSWBCMF
    
    
    
    SFEVYTBHB w ϓϩμΫτͷαΠζ͕খ͚͞Ε͹UIVOL࢖͏ͱࢥ͏ɻ
    w ·ͨผͷΞϓϩʔν͕ग़͖ͯͨΒࢼͯ͠Έ͍ͨɻ
21. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ