beginner_react_flux - Speaker Deck

beginner_react_flux

by dachi023

Slide 1

Slide 1 text

ॳ৺ऀ޲͚ͷ Α͘Θ͔ΔReactͱFlux 1

Slide 2

Slide 2 text

͜Μͳਓ޲͚ͷࢿྉͰ͢ • ReactΛ͜Ε͔Β࢖͍࢝ΊΔ, ࢖͍࢝ΊΑ͏ͱࢥ͍ͬͯΔ • ReactͰίϯϙʔωϯτͷωετʹർฐͨ͠ • FluxͷData ﬂow͕Α͘෼͔Βͳ͍ • FluxͰͦΕͧΕͷཁૉͷ੹຿͕੾Γ෼͚ΒΕͳ͍ • jQueryͷDOMࢀর஍ࠈ͔Βղ์͞Ε͍ͨ 2

Slide 3

Slide 3 text

Reactʹ͍ͭͯ 3

Slide 4

Slide 4 text

Reactʹ͍ͭͯ • Facebookࣾ੡ͷJavaScriptϥΠϒϥϦ  View (UI)Λ࡞ΔͨΊͷ΋ͷ • ෳ਺ͷίϯϙʔωϯτ (= UIύʔπ)Ͱը໘Λߏ੒  ex. ϔομʔ, αΠυόʔ, ϑολʔ etc • state, propsʹΑͬͯίϯϙʔωϯτͷঢ়ଶΛ؅ཧ, ఻ൖ • JSXͱ͍͏ಠࣗه๏ʹΑΔJS্ͰͷϚʔΫΞοϓ • VirtualDOMΛ࠾༻ 4

Slide 5

Slide 5 text

ReactͷϝϦοτ • ίϯϙʔωϯτ͕࠶ར༻Մೳ  ˠ Material-UI, React-Bootstrap ͱ͍ͬͨUIϥΠϒϥϦ • ViewϥΠϒϥϦͳͷͰଞͷϑϨʔϜϫʔΫͱ࿈ܞՄೳ  Backbone.ViewΛগͣͭ͠Reactʹ͢ΔͳͲ • ͦͦ͜͜଎͍ (jQueryͳͲʹൺ΂ͯ) • αʔόαΠυϨϯμϦϯά΋Մೳ • ਌ͷঢ়ଶ͕ߋ৽͞ΕΔ  ˠ ࢠʹ౉͖͍ͬͯͯΔ஋ʹ΋ࣗಈͰ൓ө͞ΕΔ 5

Slide 6

Slide 6 text

ReactͰ͋Γ͕ͪͳࣦഊ • jQueryΛೖΕͯΞχϝʔγϣϯͪ͠Ό͏  ˠ Reactࣗମ͸ϦονUIΛఏڙ͢ΔϥΠϒϥϦͰ͸ͳ͍  ˠˠ CSSͰؤுΖ͏ • ViewʹશͯΛ࣮૷͢Δ໰୊  APIݺͼग़͠, Viewͱͯ͠ͷ੹຿Ҏ্ͷϩδοΫ etc • ίϯϙʔωϯτͷ਌ࢠؔ܎ʹΑΔίʔϧόοΫ஍ࠈ  ࢠ͕਌ʹ௨஌ͯ͠͞Βʹͦͷ਌ʹ௨஌ͯ͠… 6

Slide 7

Slide 7 text

͍ ͭ ΋ ͷ ɾ ɾ ɾ ε ύ ή ο ς Ο ࣮ ૷ ͡ Ό ͳ ͍ Ͱ ͢ ͔ ɾ ɾ ɾ 7

Slide 8

Slide 8 text

ͱɺͳΒͳ͍ͨΊʹ 8

Slide 9

Slide 9 text

Flux 9

Slide 10

Slide 10 text

Fluxʹ͍ͭͯ • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ • ओʹ4ͭͷཁૉʹΑͬͯߏ੒͞ΕΔ • Action (Action Creator) • Dispatcher • Store • View (React Component) • σʔλͷྲྀΕ͸ৗʹҰํ޲ 10

Slide 11

Slide 11 text

Action (Action Creator) • σʔλΛऔಘ͢Δॲཧ, ඞཁ͕͋Ε͹Ճ޻·Ͱߦ͏  API௨৴ͳͲ΋͜͜Ͱߦ͏ (Action Creator) • σʔλΛઃఆͯ͠DispatcherʹҾ͖౉͢  ActionΛ൑ผ͢ΔͨΊͷλΠϓ΋Ұॹʹઃఆ͢Δ 11

Slide 12

Slide 12 text

Dispatcher • Dispatcherʹొ࿥͞ΕͨίʔϧόοΫΛ࣮ߦ͢Δ  (ίʔϧόοΫ͸Store͔Βొ࿥͞ΕΔ) • ίʔϧόοΫ͕ෳ਺͋Δ৔߹ʹͦͷॱ൪Λ੍ޚ͢Δ 12

Slide 13

Slide 13 text

Store • σʔλͱϏδωεϩδοΫΛѻ͏ • DispatcherʹίʔϧόοΫΛొ࿥͓ͯ͘͠  ActionͷλΠϓʹԠͯ͡ԿΛͲ͏ॲཧ͢Δ͔ܾΊΔ • σʔλͷมߋ͸Dispatcher͔Βͷݺͼग़͔͠ΒͷΈԠ͡Δ 13

Slide 14

Slide 14 text

View (React Component) • ը໘্ͷUIΛ؅ཧ, ඳը͢Δ • Store͔ΒσʔλΛड͚औΓදࣔ͢Δ • ը໘্ͷૢ࡞ͳͲͷΠϕϯτͱActionΛඥ͚ͮΔ  ΠϕϯτʹରԠͨ͠ActionΛݺͼग़͢ 14

Slide 15

Slide 15 text

σʔλͷྲྀΕ͸ৗʹҰํ޲ • Action: σʔλΛऔಘͯ͠λΠϓͱڞʹDispatcherʹ౉͢ • Dispatcher: Store͔Βઃఆ͞ΕͨίʔϧόοΫΛ࣮ߦ • Store: σʔλͷ؅ཧ, ৽͍͠σʔλΛViewʹฦ͢ • View: σʔλͷදࣔ, ActionΛݺͼग़͢ 15

Slide 16

Slide 16 text

͜ΕΒΛ࣮૷͢ΔͨΊͷ ࠷௿ݶͷϥΠϒϥϦ 16

Slide 17

Slide 17 text

Flux Utils 17

Slide 18

Slide 18 text

Flux Utilsʹ͍ͭͯ • Facebookࣾ੡ͷFluxϥΠϒϥϦ • ࠷௿ݶͷ࣮૷ͷΈ༻ҙ͞Ε͍ͯΔ • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ • ͜Μͳ࣌ʹΦεεϝ • ॳΊͯFluxͰ࣮૷ͯ͠ΈΔ • ଞͷFluxϑϨʔϜϫʔΫ͕৑௕͗͢Δ  • https://github.com/facebook/ﬂux 18

Slide 19

Slide 19 text

Flux Utilsͷఏڙ͢Δ4ͭͷΫϥε • Store  ଞStoreͷϕʔεʹͳ͍ͬͯΔΫϥε • ReduceStore  reduce()͢ΔͱStoreͷঢ়ଶ͕ߋ৽͞ΕΔ • MapStore  ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε • Container  React ComponentͷϥούʔͰStoreΛొ࿥Ͱ͖Δ  Container഑ԼͷComponentʹStoreͷมߋΛ௨஌ 19

Slide 20

Slide 20 text

ReduceStore • Storeͷ֦ுΫϥε • Immutable.jsΛ࢖Θͳ͍৔߹͸ReduceStoreΛ࢖͏ • StateΛอ͍࣋ͯ͠Δ • Dispatcher͔Β౉͞ΕͨStateͱAction͔Β  ৽͍͠StateΛੜ੒ͯ͠Container΁౉͢ 20

Slide 21

Slide 21 text

Container • Store͔ΒStateΛड͚औΔReact Componentͷ֦ு • ࣗ਎ͷࢠڙͱͳΔComponentʹStateͷมߋΛ௨஌͢Δ • ContainerΛ࢖͏ࡍʹؾΛ͚ͭΔ͜ͱ • State͸ͳΔ΂͘Container͕ҰׅͰ؅ཧ͢Δ  ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰ؅ཧָ͕ʹͳΔ • UI΍props (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍  Containerͱͯ͠ప͠ɺUI͸Componentͨͪʹ೚ͤΔ 21

Slide 22

Slide 22 text

dispatcher.js 22

Slide 23

Slide 23 text

dispatcher.js • Facebookࣾ੡ͷDispatcherϥΠϒϥϦ • register() ͰίʔϧόοΫΛొ࿥  ReduceStoreͳΒStoreͷconstructorʹDispatcherΛ౉͢  ˠ reduce() ΛίʔϧόοΫͱͯ͠ొ࿥ͯ͘͠ΕΔ • ղআ͢Δ࣌͸unregister() ͰղআͰ͖Δ • Action͕dispatch() Λίʔϧ͢Δͱregister() Ͱొ࿥͞Εͨ  ίʔϧόοΫͰActionͷλΠϓ͕Ұக͢Δॲཧ͕࣮ߦ  • https://github.com/facebook/ﬂux/blob/master/src/Dispatcher.js 23

Slide 24

Slide 24 text

࣮૷αϯϓϧ • https://github.com/dachi023/react-ﬂux-example  • ࠷௿ݶͷ෦෼Λαϯϓϧ࣮૷ • Action • Dispatcher (dispatcher.js) • Store (ReduceStore) • View (Container, React Component) • APIίʔϧ (axios.js) • webpackͰͷJS, CSSͷϏϧυ΋࣮૷ • Babel, PostCSS 24

Slide 25

Slide 25 text

·ͱΊ • React୯ମͩͱσʔλ؅ཧ, ఻ൖ่͕յ͢Δ • FluxΛ༻͍Δ͜ͱͰҰํ޲ʹσʔλ͕ྲྀΕΔ • Facebookࣾ੡ͷϥΠϒϥϦͰ࠷௿ݶͷߏ੒͕࡞ΕΔ • ͖ͪΜͱ੹຿Λҙ࣮ࣝͯ͠૷͢Δ͜ͱ͕ॏཁ • Action: σʔλऔಘ(APIίʔϧؚΉ), dispatch()࣮ߦ • Dispatcher: ొ࿥ίʔϧόοΫͷ࣮ߦ • Store: σʔλͷ؅ཧ, ৽نStateͷൃߦ, ίʔϧόοΫͷొ࿥ • View: • Container: StateͷҰׅ؅ཧ • Component: σʔλͷදࣔ, UIͷඳը 25

Slide 26

Slide 26 text

͓͠·͍ 26