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

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

We Are JavaScripters! @9th

66b5fea05e9370317581701c87e50eae?s=128

8845musign

July 20, 2017
Tweet

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