Flux/Reduxって何？雑に作ってみよう / easy creation of 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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ