Redux/Middlewareを酷使するためにスロットマシーン書いた

We Are JavaScripters! @9th

Transcript

1. MiddlewareΛ͏Β͢ΔͨΊʹ
   εϩοτŵŕţŎŖƃॻ͍ͨ
   We Are JavaScripters! @9th
2. ෲےϩʔϥʔͷྗΛ৴͡Ζ
   !NVTJHO
   גࣜձࣾνʔϜεϐϦοτ
   
   ےτϨͱྉཧΛ୲౰
   
 ݄ҰͰ
   ̏LHʙ೑մΛমͬͯ·͢
 
 ͓·͚ͰϑϩϯτΤϯυΛগʑ
3. ? ReduxɺͲ͜ʹϩδοΫΛॻ͘ʁ
4. View Provider Store State Reducer Middle ware User Actions
5. View Provider Store State Reducer Middle ware User Actions ίίʁ ίίʁ ίίʁ
6. ! Middleware͸Ͳ͏ʁ
7. View Provider Store State Reducer Middle ware User Actions ίί
8. Pros. Dispatch 1 ࣗ༝ʹActionͷ
   ϑϩʔ੍͕ޚՄೳ State 2 ඞཁͳState͸
   Middlewareࣗମ͕
   ஌͍ͬͯΔ
   Action 3 ͋ΒΏΔActionʹ
   հೖͰ͖Δ
   
9. νʔϜʮϝϦοτ͕૝૾͔ͭΜʯ ouch!
10. ࣮ྫΛަ͑ͳ͚Ε͹఻ΘΒͳ͍ ͦͦ͜͜ͷن໛Λ࡞Βͳ͚Ε͹Θ͔Βͳ͍
11. ΞϓϦॻ͍ͪΌ͑
12. BINGO༻εϩοτŵŕţŎŖƃ ˞ձࣾͷࣾ಺ΠϕϯτͰ࣮ઓ౤ೖ https://github.com/8845musign/bingo-2017
13. DEMO
14. ? Redux͸ԿΛ΍ͬͯΔͷ͔
15. ήʔϜશମͷ੍ޚ
16. εϩοτΞχϝͷ੍ޚ
17. ࢴਧઇͷ੍ޚ
18. ? Middleware͸Ͳ͏ͳͬͯΔ͔
19. நબ Ϣʔβͷૢ࡞ʹΑΓ
    Ұͭͷ"DUJPO͕౤͛ΒΕΔ
20. நબ ࢴਧઇ εϩοτ։࢝ εϩοτऴྃ "DUJPO͸.JEEMFXBSF
    ʹΑͬͯෳ਺ͷ"DUJPO
    ʹ෼ղ͞ΕΔ Ξχϝʔγϣϯϧʔϓ
 ىಈʢεϩοτʣ Ξχϝʔγϣϯϧʔϓ
 ىಈʢࢴਧઇʣ εϩοτͷ։࢝ εϩοτΞχϝ εϩοτΞχϝ εϩοτΞχϝ ࢴਧઇΞχϝ ऴྃ൑ఆ
21. நબ ࢴਧઇ εϩοτ։࢝ εϩοτऴྃ .JEEMFXBSFͰ͸
    ඞཁͳܭࢉ͕
    ߦΘΕΔ Ϧʔϧͷֆฑͷੜ੒ ΞλϦͷநબ εϩοτΞχϝ εϩοτΞχϝ εϩοτΞχϝ ࢴਧઇΞχϝ ࠲ඪܭࢉ ࠲ඪܭࢉ
22. "DUJPOͷൃߦ ؆ུԽͯ͠ΈΔͱ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ
23. "DUJPOͷൃߦ "DUJPOͱ3FEVDFS
    ͸͓ͦΖ͘͠
    γϯϓϧʹͳΔ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ தؒॲཧ
24. "DUJPOͷൃߦ "DUJPOͱ3FEVDFS
    ͸͓ͦΖ͘͠
    γϯϓϧʹͳΔ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ T தؒॲཧ Πϕϯτͷൃߦ εςʔτͷ؅ཧ
25. "DUJPOͷൃߦ .JEEMXBSF͸
    Կʹ൓Ԡͯ͠
    ԿʹॲཧΛܨ͙͔
    ͚ͩΛߟ͑Ε͹ྑ͍ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ
26. ੹຿͕໌֬ʹͳΓ෼ׂͰ͖ͨ
27. ٯʹॲཧͷͭͳ͕Γͷ೺Ѳ͕େม
28. ٯʹॲཧͷͭͳ͕Γͷ೺Ѳ͕େม %6$,4ύλʔϯͰ੔ཧ
29. MiddlewareɺΞϦ͔΋
30. Έͳ͞Μ΋.JEEMFXBSFΛ
    ͏Βͯ͠Έͯ͸͍͔͕ʁ
31. એ఻ ͝͸Μ৯΂ͳ͕ΒϑϩϯτΤϯυΛ
    ޠΒ͏ձΛ೔ʹߦ͍·͢ɻ IUUQTDPOOQBTTDPNFWFOU
32. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠