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

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

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

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
18. Storeͷ໾ׂ • ঢ়ଶͷอ࣋ͱมߋ • มߋͨ͠Β௨஌Λඈ͹͢
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ํࣜ) ΄͔ʹ΋΍Γํ͋Δ͔΋ʁ
26. Θʔ͍ɺͨʔͷ͠ʔ
27. ՝୊ • ࡶʹ࡞ͬͨ΍ͭͳͷͰɺ͋ͱͪΐͬͱ࢓૊Έ ΛՃ͑ͳ͍ͱϥΠϒϥϦԽͰ͖ͳ͍ɻ • ReduxͰ΋ͦ͏͚ͩͲɺඇಉظॲཧΛͲ͜ʹ ஔ͘ͷʁ໰୊
28. ·ͱΊ • Modern JavaScript ͍ͨͩ·boothͰൃചதͰ ͢ɻ঎ۀ൛͕ਐߦதͰ͢ɻ • Flux͸ΞϓϦΛγϯϓϧʹ͢ΔͨΊͷσβΠϯ ύλʔϯ (ͳͷͰɺReactҎ֎ʹ΋࢖͑Δ) • Flux͸؆୯ʹ࡞ΕΔ https://tk-rabbit-house.booth.pm/items/489874
29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ