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

Flux/Reduxって何?雑に作ってみよう / easy creation of flux

Flux/Reduxって何?雑に作ってみよう / easy creation of flux

第1回 React.js 導入事例の発表資料です。

Flux/Reduxとは何かという説明と、実際にFluxを作ってみようというものです。

A6a5e01b331d18dbd9c5de1f2cc2879f?s=128

erukiti

May 26, 2017
Tweet

Transcript

  1. Flux/ReduxͬͯԿʁ ࡶʹ࡞ͬͯΈΑ͏ erukiti

  2. erukiti (͑Δ͖ͪ) • ES2016େ޷͖ (ES5Ҏલ͸ΨϯແࢹελΠϧ) • ͍ͨͩ·ٳཆத • Switchങ͍·ͨ͠ (θϧμ125࣌ؒҎ্ɺϚϦ

    ΦΧʔτ15࣌ؒҎ্ϓϨΠ)
  3. ٕज़ॻయ2Ͱຊͩ͠·ͨ͠ • ٕज़ॻయ2࠷ߴͰͨ͠ɻ • Impress R&D͞·Ͱ঎ۀԽ ͷ࡞ۀ͕ਐߦதͰ͢ɻ ๻ͷਐḿ͸χϟΦεͰ͢ɻ https://tk-rabbit-house.booth.pm/items/489874

  4. ࠓ೔ͷ಺༰ • Reactʹ෇͖΋ͷͷFlux/Reduxͱ͸Կ͔ • FluxΛ؆୯ʹ࡞Δ

  5. Flux΍ReduxͬͯԿʁ

  6. Flux͸σβΠϯύλʔϯ • σʔλϑϩʔΛҰํ௨ߦʹ͢Δͱ͍͏σβΠ ϯύλʔϯ • Facebook͕ࣾಉ໊͡લͷϥΠϒϥϦ࡞ͬͯΔ • ObserverύλʔϯͱCommandύλʔϯͷ૊ Έ߹Θͤ ฆΒΘ͍͠

  7. ͜ΜͳਤΛݟͨ͜ͱ͋Γ·͔͢ʁ Action Dispatcher Store View Action

  8. ActionΛ౤͛Δ(dispatch͢Δ)

  9. ঢ়ଶ؅ཧ͸Storeͷ͠͝ͱ • Store͸ΞϓϦͷঢ়ଶ(State)Λ࣋ͭ • ౤͛ΒΕͨActionΛreducerͰঢ়ଶΛߋ৽ • ߋ৽ͨ͠ΒViewʹ௨஌Λඈ͹͢

  10. View͸γϯϓϧʹ • Store͔Βͷߋ৽௨஌Ͱඳը (Observer) • Ϣʔβʔ͔Βͷೖྗ͸ActionΛdispatch͢Δ • ࣮͸View͸ReactҎ֎Ͱ΋OK

  11. ͓͞Β͍ Action Dispatcher Store View Action

  12. Կ͕͏Ε͍͠ͷʁ • σʔλͷྲྀΕ͕୯७Խ͢Δ • ੹຿Λ໌֬ʹ෼͚ΒΕΔ (༨஍͕͋Δ) • ͦΕΒʹΑͬͯૄ݁߹ʹͰ͖Δ

  13. Redux? Action Store View Action

  14. ReduxͱFluxͷҧ͍ • FluxͰ͸Dispatcher͸γϯάϧτϯͰStore͸ ෳ਺࣋ͯΔ • ͦΕͳΒStoreΛγϯάϧτϯʹ͢Ε͹ Dispatcher͍Βͳ͍ࢠͳͷͰ͸ʁ • ͱ͍͏ׂΓ੾ΓΛ࣮ͨ͠૷͕Redux

  15. FluxΛ࡞ͬͯΈΔ

  16. ϕʔεͱͳΔReact Component

  17. None
  18. Storeͷ໾ׂ • ঢ়ଶͷอ࣋ͱมߋ • มߋͨ͠Β௨஌Λඈ͹͢

  19. None
  20. reducer͸ϏδωεϩδοΫ • reducer͸ActionΛݩʹStateΛมߋ͢Δํ๏ ͚ͩΛهͨ͠΋ͷ • stateʹॳظ஋ΛೖΕͯΔͷ͸Reduxͷ΍Γํ

  21. React ComponentΛมߋ͢Δ

  22. ·ͩsetState͕࢒ͬͯΔ݅ • Store࡞ͬͯdispatch࣮૷͚ͨ͠Ͳɺ·ͩ setState͕࢒ͬͯ͠·͍ͬͯΔɻ • Ͳ͏ͤFluxಋೖ͢ΔΜ͔ͩΒprops͚ͩ࢖͍ͨ ͍ • Ͳ͏͢Ε͹propsΛߋ৽(?)Ͱ͖Δͷ͔ʁ

  23. propsΛߋ৽(?)͢Δํ๏ 1. react-domͷrenderΛ໌ࣔతʹୟ͘ 2. ର৅ͷComponentΛߋ৽͢ΔͨΊͷϥο ύʔΛ࡞Δ (react-reduxํࣜ) ΄͔ʹ΋΍Γํ͋Δ͔΋ʁ

  24. None
  25. None
  26. Θʔ͍ɺͨʔͷ͠ʔ

  27. ՝୊ • ࡶʹ࡞ͬͨ΍ͭͳͷͰɺ͋ͱͪΐͬͱ࢓૊Έ ΛՃ͑ͳ͍ͱϥΠϒϥϦԽͰ͖ͳ͍ɻ • ReduxͰ΋ͦ͏͚ͩͲɺඇಉظॲཧΛͲ͜ʹ ஔ͘ͷʁ໰୊

  28. ·ͱΊ • Modern JavaScript ͍ͨͩ·boothͰൃചதͰ ͢ɻ঎ۀ൛͕ਐߦதͰ͢ɻ • Flux͸ΞϓϦΛγϯϓϧʹ͢ΔͨΊͷσβΠϯ ύλʔϯ (ͳͷͰɺReactҎ֎ʹ΋࢖͑Δ)

    • Flux͸؆୯ʹ࡞ΕΔ https://tk-rabbit-house.booth.pm/items/489874
  29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ