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

Slide 1

Slide 1 text

Flux/ReduxͬͯԿʁ ࡶʹ࡞ͬͯΈΑ͏ erukiti

Slide 2

Slide 2 text

erukiti (͑Δ͖ͪ) • ES2016େ޷͖ (ES5Ҏલ͸ΨϯແࢹελΠϧ) • ͍ͨͩ·ٳཆத • Switchങ͍·ͨ͠ (θϧμ125࣌ؒҎ্ɺϚϦ ΦΧʔτ15࣌ؒҎ্ϓϨΠ)

Slide 3

Slide 3 text

ٕज़ॻయ2Ͱຊͩ͠·ͨ͠ • ٕज़ॻయ2࠷ߴͰͨ͠ɻ • Impress R&D͞·Ͱ঎ۀԽ ͷ࡞ۀ͕ਐߦதͰ͢ɻ ๻ͷਐḿ͸χϟΦεͰ͢ɻ https://tk-rabbit-house.booth.pm/items/489874

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Flux΍ReduxͬͯԿʁ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ActionΛ౤͛Δ(dispatch͢Δ)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

͓͞Β͍ Action Dispatcher Store View Action

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Redux? Action Store View Action

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

FluxΛ࡞ͬͯΈΔ

Slide 16

Slide 16 text

ϕʔεͱͳΔReact Component

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Storeͷ໾ׂ • ঢ়ଶͷอ࣋ͱมߋ • มߋͨ͠Β௨஌Λඈ͹͢

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

React ComponentΛมߋ͢Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Θʔ͍ɺͨʔͷ͠ʔ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

·ͱΊ • Modern JavaScript ͍ͨͩ·boothͰൃചதͰ ͢ɻ঎ۀ൛͕ਐߦதͰ͢ɻ • Flux͸ΞϓϦΛγϯϓϧʹ͢ΔͨΊͷσβΠϯ ύλʔϯ (ͳͷͰɺReactҎ֎ʹ΋࢖͑Δ) • Flux͸؆୯ʹ࡞ΕΔ https://tk-rabbit-house.booth.pm/items/489874

Slide 29

Slide 29 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ