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

by 8845musign

Slide 1

Slide 1 text

MiddlewareΛ͏Β͢ΔͨΊʹ εϩοτŵŕţŎŖƃॻ͍ͨ We Are JavaScripters! @9th

Slide 2

Slide 2 text

ෲےϩʔϥʔͷྗΛ৴͡Ζ !NVTJHO גࣜձࣾνʔϜεϐϦοτےτϨͱྉཧΛ୲౰  ݄ҰͰ̏LHʙ೑մΛমͬͯ·͢    ͓·͚ͰϑϩϯτΤϯυΛগʑ

Slide 3

Slide 3 text

? ReduxɺͲ͜ʹϩδοΫΛॻ͘ʁ

Slide 4

Slide 4 text

View Provider Store State Reducer Middle ware User Actions

Slide 5

Slide 5 text

View Provider Store State Reducer Middle ware User Actions ίίʁ ίίʁ ίίʁ

Slide 6

Slide 6 text

! Middleware͸Ͳ͏ʁ

Slide 7

Slide 7 text

View Provider Store State Reducer Middle ware User Actions ίί

Slide 8

Slide 8 text

Pros. Dispatch 1 ࣗ༝ʹActionͷ ϑϩʔ੍͕ޚՄೳ State 2 ඞཁͳState͸ Middlewareࣗମ͕ ஌͍ͬͯΔ Action 3 ͋ΒΏΔActionʹ հೖͰ͖Δ

Slide 9

Slide 9 text

νʔϜʮϝϦοτ͕૝૾͔ͭΜʯ ouch!

Slide 10

Slide 10 text

࣮ྫΛަ͑ͳ͚Ε͹఻ΘΒͳ͍ ͦͦ͜͜ͷن໛Λ࡞Βͳ͚Ε͹Θ͔Βͳ͍

Slide 11

Slide 11 text

ΞϓϦॻ͍ͪΌ͑

Slide 12

Slide 12 text

BINGO༻εϩοτŵŕţŎŖƃ ˞ձࣾͷࣾ಺ΠϕϯτͰ࣮ઓ౤ೖ https://github.com/8845musign/bingo-2017

Slide 13

Slide 13 text

DEMO

Slide 14

Slide 14 text

? Redux͸ԿΛ΍ͬͯΔͷ͔

Slide 15

Slide 15 text

ήʔϜશମͷ੍ޚ

Slide 16

Slide 16 text

εϩοτΞχϝͷ੍ޚ

Slide 17

Slide 17 text

ࢴਧઇͷ੍ޚ

Slide 18

Slide 18 text

? Middleware͸Ͳ͏ͳͬͯΔ͔

Slide 19

Slide 19 text

நબ Ϣʔβͷૢ࡞ʹΑΓ Ұͭͷ"DUJPO͕౤͛ΒΕΔ

Slide 20

Slide 20 text

நબ ࢴਧઇ εϩοτ։࢝ εϩοτऴྃ "DUJPO͸.JEEMFXBSF ʹΑͬͯෳ਺ͷ"DUJPO ʹ෼ղ͞ΕΔ Ξχϝʔγϣϯϧʔϓ  ىಈʢεϩοτʣ Ξχϝʔγϣϯϧʔϓ  ىಈʢࢴਧઇʣ εϩοτͷ։࢝ εϩοτΞχϝ εϩοτΞχϝ εϩοτΞχϝ ࢴਧઇΞχϝ ऴྃ൑ఆ

Slide 21

Slide 21 text

நબ ࢴਧઇ εϩοτ։࢝ εϩοτऴྃ .JEEMFXBSFͰ͸ ඞཁͳܭࢉ͕ ߦΘΕΔ Ϧʔϧͷֆฑͷੜ੒ ΞλϦͷநબ εϩοτΞχϝ εϩοτΞχϝ εϩοτΞχϝ ࢴਧઇΞχϝ ࠲ඪܭࢉ ࠲ඪܭࢉ

Slide 22

Slide 22 text

"DUJPOͷൃߦ ؆ུԽͯ͠ΈΔͱ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ

Slide 23

Slide 23 text

"DUJPOͷൃߦ "DUJPOͱ3FEVDFS ͸͓ͦΖ͘͠ γϯϓϧʹͳΔ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ தؒॲཧ

Slide 24

Slide 24 text

"DUJPOͷൃߦ "DUJPOͱ3FEVDFS ͸͓ͦΖ͘͠ γϯϓϧʹͳΔ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ T தؒॲཧ Πϕϯτͷൃߦ εςʔτͷ؅ཧ

Slide 25

Slide 25 text

"DUJPOͷൃߦ .JEEMXBSF͸ Կʹ൓Ԡͯ͠ ԿʹॲཧΛܨ͙͔ ͚ͩΛߟ͑Ε͹ྑ͍ 3FEVDFSʹΑΔॲཧ "DUJPOͷൃߦ .JEEMFXBSF ܭࢉ ʜ

Slide 26

Slide 26 text

੹຿͕໌֬ʹͳΓ෼ׂͰ͖ͨ

Slide 27

Slide 27 text

ٯʹॲཧͷͭͳ͕Γͷ೺Ѳ͕େม

Slide 28

Slide 28 text

ٯʹॲཧͷͭͳ͕Γͷ೺Ѳ͕େม %6$,4ύλʔϯͰ੔ཧ

Slide 29

Slide 29 text

MiddlewareɺΞϦ͔΋

Slide 30

Slide 30 text

Έͳ͞Μ΋.JEEMFXBSFΛ ͏Βͯ͠Έͯ͸͍͔͕ʁ

Slide 31

Slide 31 text

એ఻ ͝͸Μ৯΂ͳ͕ΒϑϩϯτΤϯυΛ ޠΒ͏ձΛ೔ʹߦ͍·͢ɻ IUUQTDPOOQBTTDPNFWFOU

Slide 32

Slide 32 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠