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

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

A6a5e01b331d18dbd9c5de1f2cc2879f?s=47 erukiti
May 26, 2017
Programming
1
890

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

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

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

A6a5e01b331d18dbd9c5de1f2cc2879f?s=128

erukiti

May 26, 2017
Tweet

More Decks by erukiti

See All by erukiti
実践モブプログラミング/ mob programming practice
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
3
790
今日からアウトプットを始めよう / let's start the output from today
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
1
400
Markdownをスクリプト言語として走らせてみた / actual-code
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
0
3.4k
もくもく執筆会 for 技術書典5 / techbook_meepup
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
0
74
#技術書典 で爆死しないために、今から始めるべきこと / first-step-techbookfest
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
1
670
修羅場を支えるテクニック / Technique of SHURA battlefield
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
1
880
暗号通貨・ブロックチェーンをたしなむ JSフレンズ -初夏のJavaScript祭 in サーキュレーションビル ForPro- / crypto coin js
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
1
610
暗号技術たーのしー / 5-14-techbook-meetup
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
0
72
ライトニングネットワーク完全に理解した (わかってない) / lightning-network
A6a5e01b331d18dbd9c5de1f2cc2879f?s=48 erukiti
2
1.8k

Other Decks in Programming

See All in Programming
Named Document って何？
4cda705b5eecbba889fb97ce9f374efe?s=48 harunakano
0
300
The future of trust stores in Python
6638acfdb9c5979d11b4312984292c55?s=48 sethmlarson
0
180
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
290
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
PRO
28
18k
Keep Your Cache Always Fresh With Debezium
8e25c0ca4bf25113bd9c0ccc5d118164?s=48 gunnarmorling
0
180
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
Be01969dc1e5ac0998183f9a114dbf58?s=48 iwasiman
1
150
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
3
2k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
4631864606a93224804a49331d1a7dfd?s=48 fufuhu
3
1.5k
Git Rebase
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
7
1k
WindowsコンテナDojo：準備編
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
470
Milestoner
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
1
200
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
3
1.6k

Featured

See All Featured
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
890
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.1k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
43
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k

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