beginner_react_flux

 beginner_react_flux

2ed42bc0f8a07800c61245ddafc1056b?s=128

dachi023

July 29, 2016
Tweet

Transcript

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

  2. ͜Μͳਓ޲͚ͷࢿྉͰ͢ • ReactΛ͜Ε͔Β࢖͍࢝ΊΔ, ࢖͍࢝ΊΑ͏ͱࢥ͍ͬͯΔ • ReactͰίϯϙʔωϯτͷωετʹർฐͨ͠ • FluxͷData flow͕Α͘෼͔Βͳ͍ •

    FluxͰͦΕͧΕͷཁૉͷ੹຿͕੾Γ෼͚ΒΕͳ͍ • jQueryͷDOMࢀর஍ࠈ͔Βղ์͞Ε͍ͨ 2
  3. Reactʹ͍ͭͯ 3

  4. Reactʹ͍ͭͯ • Facebookࣾ੡ͷJavaScriptϥΠϒϥϦ
 View (UI)Λ࡞ΔͨΊͷ΋ͷ • ෳ਺ͷίϯϙʔωϯτ (= UIύʔπ)Ͱը໘Λߏ੒
 ex.

    ϔομʔ, αΠυόʔ, ϑολʔ etc • state, propsʹΑͬͯίϯϙʔωϯτͷঢ়ଶΛ؅ཧ, ఻ൖ • JSXͱ͍͏ಠࣗه๏ʹΑΔJS্ͰͷϚʔΫΞοϓ • VirtualDOMΛ࠾༻ 4
  5. ReactͷϝϦοτ • ίϯϙʔωϯτ͕࠶ར༻Մೳ
 ˠ Material-UI, React-Bootstrap ͱ͍ͬͨUIϥΠϒϥϦ • ViewϥΠϒϥϦͳͷͰଞͷϑϨʔϜϫʔΫͱ࿈ܞՄೳ
 Backbone.ViewΛগͣͭ͠Reactʹ͢ΔͳͲ

    • ͦͦ͜͜଎͍ (jQueryͳͲʹൺ΂ͯ) • αʔόαΠυϨϯμϦϯά΋Մೳ • ਌ͷঢ়ଶ͕ߋ৽͞ΕΔ
 ˠ ࢠʹ౉͖͍ͬͯͯΔ஋ʹ΋ࣗಈͰ൓ө͞ΕΔ 5
  6. ReactͰ͋Γ͕ͪͳࣦഊ • jQueryΛೖΕͯΞχϝʔγϣϯͪ͠Ό͏
 ˠ Reactࣗମ͸ϦονUIΛఏڙ͢ΔϥΠϒϥϦͰ͸ͳ͍
 ˠˠ CSSͰؤுΖ͏ • ViewʹશͯΛ࣮૷͢Δ໰୊
 APIݺͼग़͠,

    Viewͱͯ͠ͷ੹຿Ҏ্ͷϩδοΫ etc • ίϯϙʔωϯτͷ਌ࢠؔ܎ʹΑΔίʔϧόοΫ஍ࠈ
 ࢠ͕਌ʹ௨஌ͯ͠͞Βʹͦͷ਌ʹ௨஌ͯ͠… 6
  7. ͍ ͭ ΋ ͷ ɾ ɾ ɾ ε ύ ή

    ο ς Ο ࣮ ૷ ͡ Ό ͳ ͍ Ͱ ͢ ͔ ɾ ɾ ɾ 7
  8. ͱɺͳΒͳ͍ͨΊʹ 8

  9. Flux 9

  10. Fluxʹ͍ͭͯ • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ • ओʹ4ͭͷཁૉʹΑͬͯߏ੒͞ΕΔ • Action (Action Creator) •

    Dispatcher • Store • View (React Component) • σʔλͷྲྀΕ͸ৗʹҰํ޲ 10
  11. Action (Action Creator) • σʔλΛऔಘ͢Δॲཧ, ඞཁ͕͋Ε͹Ճ޻·Ͱߦ͏
 API௨৴ͳͲ΋͜͜Ͱߦ͏ (Action Creator) •

    σʔλΛઃఆͯ͠DispatcherʹҾ͖౉͢
 ActionΛ൑ผ͢ΔͨΊͷλΠϓ΋Ұॹʹઃఆ͢Δ 11
  12. Dispatcher • Dispatcherʹొ࿥͞ΕͨίʔϧόοΫΛ࣮ߦ͢Δ
 (ίʔϧόοΫ͸Store͔Βొ࿥͞ΕΔ) • ίʔϧόοΫ͕ෳ਺͋Δ৔߹ʹͦͷॱ൪Λ੍ޚ͢Δ 12

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

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


    ΠϕϯτʹରԠͨ͠ActionΛݺͼग़͢ 14
  15. σʔλͷྲྀΕ͸ৗʹҰํ޲ • Action: σʔλΛऔಘͯ͠λΠϓͱڞʹDispatcherʹ౉͢ • Dispatcher: Store͔Βઃఆ͞ΕͨίʔϧόοΫΛ࣮ߦ • Store: σʔλͷ؅ཧ,

    ৽͍͠σʔλΛViewʹฦ͢ • View: σʔλͷදࣔ, ActionΛݺͼग़͢ 15
  16. ͜ΕΒΛ࣮૷͢ΔͨΊͷ ࠷௿ݶͷϥΠϒϥϦ 16

  17. Flux Utils 17

  18. Flux Utilsʹ͍ͭͯ • Facebookࣾ੡ͷFluxϥΠϒϥϦ • ࠷௿ݶͷ࣮૷ͷΈ༻ҙ͞Ε͍ͯΔ • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ • ͜Μͳ࣌ʹΦεεϝ

    • ॳΊͯFluxͰ࣮૷ͯ͠ΈΔ • ଞͷFluxϑϨʔϜϫʔΫ͕৑௕͗͢Δ
 • https://github.com/facebook/flux 18
  19. Flux Utilsͷఏڙ͢Δ4ͭͷΫϥε • Store
 ଞStoreͷϕʔεʹͳ͍ͬͯΔΫϥε • ReduceStore
 reduce()͢ΔͱStoreͷঢ়ଶ͕ߋ৽͞ΕΔ • MapStore


    ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε • Container
 React ComponentͷϥούʔͰStoreΛొ࿥Ͱ͖Δ
 Container഑ԼͷComponentʹStoreͷมߋΛ௨஌ 19
  20. ReduceStore • Storeͷ֦ுΫϥε • Immutable.jsΛ࢖Θͳ͍৔߹͸ReduceStoreΛ࢖͏ • StateΛอ͍࣋ͯ͠Δ • Dispatcher͔Β౉͞ΕͨStateͱAction͔Β
 ৽͍͠StateΛੜ੒ͯ͠Container΁౉͢

    20
  21. Container • Store͔ΒStateΛड͚औΔReact Componentͷ֦ு • ࣗ਎ͷࢠڙͱͳΔComponentʹStateͷมߋΛ௨஌͢Δ • ContainerΛ࢖͏ࡍʹؾΛ͚ͭΔ͜ͱ • State͸ͳΔ΂͘Container͕ҰׅͰ؅ཧ͢Δ


    ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰ؅ཧָ͕ʹͳΔ • UI΍props (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍
 Containerͱͯ͠ప͠ɺUI͸Componentͨͪʹ೚ͤΔ 21
  22. dispatcher.js 22

  23. dispatcher.js • Facebookࣾ੡ͷDispatcherϥΠϒϥϦ • register() ͰίʔϧόοΫΛొ࿥
 ReduceStoreͳΒStoreͷconstructorʹDispatcherΛ౉͢
 ˠ reduce() ΛίʔϧόοΫͱͯ͠ొ࿥ͯ͘͠ΕΔ

    • ղআ͢Δ࣌͸unregister() ͰղআͰ͖Δ • Action͕dispatch() Λίʔϧ͢Δͱregister() Ͱొ࿥͞Εͨ
 ίʔϧόοΫͰActionͷλΠϓ͕Ұக͢Δॲཧ͕࣮ߦ
 • https://github.com/facebook/flux/blob/master/src/Dispatcher.js 23
  24. ࣮૷αϯϓϧ • https://github.com/dachi023/react-flux-example
 • ࠷௿ݶͷ෦෼Λαϯϓϧ࣮૷ • Action • Dispatcher (dispatcher.js)

    • Store (ReduceStore) • View (Container, React Component) • APIίʔϧ (axios.js) • webpackͰͷJS, CSSͷϏϧυ΋࣮૷ • Babel, PostCSS 24
  25. ·ͱΊ • React୯ମͩͱσʔλ؅ཧ, ఻ൖ่͕յ͢Δ • FluxΛ༻͍Δ͜ͱͰҰํ޲ʹσʔλ͕ྲྀΕΔ • Facebookࣾ੡ͷϥΠϒϥϦͰ࠷௿ݶͷߏ੒͕࡞ΕΔ • ͖ͪΜͱ੹຿Λҙ࣮ࣝͯ͠૷͢Δ͜ͱ͕ॏཁ

    • Action: σʔλऔಘ(APIίʔϧؚΉ), dispatch()࣮ߦ • Dispatcher: ొ࿥ίʔϧόοΫͷ࣮ߦ • Store: σʔλͷ؅ཧ, ৽نStateͷൃߦ, ίʔϧόοΫͷొ࿥ • View: • Container: StateͷҰׅ؅ཧ • Component: σʔλͷදࣔ, UIͷඳը 25
  26. ͓͠·͍ 26