Upgrade to Pro — share decks privately, control downloads, hide ads and more …

beginner_react_flux

 beginner_react_flux

Avatar for dachi023

dachi023

July 29, 2016
Tweet

More Decks by dachi023

Other Decks in Programming

Transcript

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

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

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

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

    ο ς Ο ࣮ ૷ ͡ Ό ͳ ͍ Ͱ ͢ ͔ ɾ ɾ ɾ 7
  5. Fluxʹ͍ͭͯ • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ • ओʹ4ͭͷཁૉʹΑͬͯߏ੒͞ΕΔ • Action (Action Creator) •

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

    σʔλΛઃఆͯ͠DispatcherʹҾ͖౉͢
 ActionΛ൑ผ͢ΔͨΊͷλΠϓ΋Ұॹʹઃఆ͢Δ 11
  7. Flux Utilsʹ͍ͭͯ • Facebookࣾ੡ͷFluxϥΠϒϥϦ • ࠷௿ݶͷ࣮૷ͷΈ༻ҙ͞Ε͍ͯΔ • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ • ͜Μͳ࣌ʹΦεεϝ

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


    ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε • Container
 React ComponentͷϥούʔͰStoreΛొ࿥Ͱ͖Δ
 Container഑ԼͷComponentʹStoreͷมߋΛ௨஌ 19
  9. Container • Store͔ΒStateΛड͚औΔReact Componentͷ֦ு • ࣗ਎ͷࢠڙͱͳΔComponentʹStateͷมߋΛ௨஌͢Δ • ContainerΛ࢖͏ࡍʹؾΛ͚ͭΔ͜ͱ • State͸ͳΔ΂͘Container͕ҰׅͰ؅ཧ͢Δ


    ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰ؅ཧָ͕ʹͳΔ • UI΍props (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍
 Containerͱͯ͠ప͠ɺUI͸Componentͨͪʹ೚ͤΔ 21
  10. 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
  11. ࣮૷αϯϓϧ • 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
  12. ·ͱΊ • React୯ମͩͱσʔλ؅ཧ, ఻ൖ่͕յ͢Δ • FluxΛ༻͍Δ͜ͱͰҰํ޲ʹσʔλ͕ྲྀΕΔ • Facebookࣾ੡ͷϥΠϒϥϦͰ࠷௿ݶͷߏ੒͕࡞ΕΔ • ͖ͪΜͱ੹຿Λҙ࣮ࣝͯ͠૷͢Δ͜ͱ͕ॏཁ

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