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

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠