Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flux/Reduxって何?雑に作ってみよう / easy creation of flux
Search
erukiti
May 26, 2017
Programming
1
1.1k
Flux/Reduxって何?雑に作ってみよう / easy creation of flux
第1回 React.js 導入事例の発表資料です。
Flux/Reduxとは何かという説明と、実際にFluxを作ってみようというものです。
erukiti
May 26, 2017
Tweet
Share
More Decks by erukiti
See All by erukiti
Gemini 2.0 Flashで実現する高コスパAI開発 〜実践的プロンプトエンジニアリングと文書管理システムの実装例〜/gemini-2.0-flash-prompt-engineering
erukiti
15
5.2k
LLMをねじ伏せる/Conquer the LLM
erukiti
0
140
鮮度が高すぎて世界で誰も正解を見つけてない課題に取り組んでいる/ Freshness issues
erukiti
1
750
実演TypeScript + GitHub Copilot
erukiti
9
4.3k
Function Calling対応Playgroundを作って検証してみた/LLMMeetup#3
erukiti
0
480
プロンプトを管理しやすくするツールを作ってみた / I created a tool to make the prompts easier to manage.
erukiti
3
1.9k
実践モブプログラミング/ mob programming practice
erukiti
3
1.5k
今日からアウトプットを始めよう / let's start the output from today
erukiti
1
750
Markdownをスクリプト言語として走らせてみた / actual-code
erukiti
0
4.3k
Other Decks in Programming
See All in Programming
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
130
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.1k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
PEPCは何を変えようとしていたのか
ken7253
2
170
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
150
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
The Cult of Friendly URLs
andyhume
78
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
87
9.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
A Philosophy of Restraint
colly
203
16k
Producing Creativity
orderedlist
PRO
344
40k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
GraphQLとの向き合い方2022年版
quramy
44
14k
Writing Fast Ruby
sferik
628
61k
Transcript
Flux/ReduxͬͯԿʁ ࡶʹ࡞ͬͯΈΑ͏ erukiti
erukiti (͑Δ͖ͪ) • ES2016େ͖ (ES5ҎલΨϯແࢹελΠϧ) • ͍ͨͩ·ٳཆத • Switchങ͍·ͨ͠ (θϧμ125࣌ؒҎ্ɺϚϦ
ΦΧʔτ15࣌ؒҎ্ϓϨΠ)
ٕज़ॻయ2Ͱຊͩ͠·ͨ͠ • ٕज़ॻయ2࠷ߴͰͨ͠ɻ • Impress R&D͞·ͰۀԽ ͷ࡞ۀ͕ਐߦதͰ͢ɻ ͷਐḿχϟΦεͰ͢ɻ https://tk-rabbit-house.booth.pm/items/489874
ࠓͷ༰ • Reactʹ͖ͷͷFlux/ReduxͱԿ͔ • FluxΛ؆୯ʹ࡞Δ
FluxReduxͬͯԿʁ
FluxσβΠϯύλʔϯ • σʔλϑϩʔΛҰํ௨ߦʹ͢Δͱ͍͏σβΠ ϯύλʔϯ • Facebook͕ࣾಉ໊͡લͷϥΠϒϥϦ࡞ͬͯΔ • ObserverύλʔϯͱCommandύλʔϯͷ Έ߹Θͤ ฆΒΘ͍͠
͜ΜͳਤΛݟͨ͜ͱ͋Γ·͔͢ʁ Action Dispatcher Store View Action
ActionΛ͛Δ(dispatch͢Δ)
ঢ়ଶཧStoreͷ͠͝ͱ • StoreΞϓϦͷঢ়ଶ(State)Λ࣋ͭ • ͛ΒΕͨActionΛreducerͰঢ়ଶΛߋ৽ • ߋ৽ͨ͠ΒViewʹ௨Λඈ͢
Viewγϯϓϧʹ • Store͔Βͷߋ৽௨Ͱඳը (Observer) • Ϣʔβʔ͔ΒͷೖྗActionΛdispatch͢Δ • ࣮ViewReactҎ֎ͰOK
͓͞Β͍ Action Dispatcher Store View Action
Կ͕͏Ε͍͠ͷʁ • σʔλͷྲྀΕ͕୯७Խ͢Δ • Λ໌֬ʹ͚ΒΕΔ (༨͕͋Δ) • ͦΕΒʹΑͬͯૄ݁߹ʹͰ͖Δ
Redux? Action Store View Action
ReduxͱFluxͷҧ͍ • FluxͰDispatcherγϯάϧτϯͰStore ෳ࣋ͯΔ • ͦΕͳΒStoreΛγϯάϧτϯʹ͢Ε Dispatcher͍Βͳ͍ࢠͳͷͰʁ • ͱ͍͏ׂΓΓΛ࣮͕ͨ͠Redux
FluxΛ࡞ͬͯΈΔ
ϕʔεͱͳΔReact Component
None
Storeͷׂ • ঢ়ଶͷอ࣋ͱมߋ • มߋͨ͠Β௨Λඈ͢
None
reducerϏδωεϩδοΫ • reducerActionΛݩʹStateΛมߋ͢Δํ๏ ͚ͩΛهͨ͠ͷ • stateʹॳظΛೖΕͯΔͷReduxͷΓํ
React ComponentΛมߋ͢Δ
·ͩsetState͕ͬͯΔ݅ • Store࡞ͬͯdispatch࣮͚ͨ͠Ͳɺ·ͩ setState͕ͬͯ͠·͍ͬͯΔɻ • Ͳ͏ͤFluxಋೖ͢ΔΜ͔ͩΒprops͚͍ͩͨ ͍ • Ͳ͏͢ΕpropsΛߋ৽(?)Ͱ͖Δͷ͔ʁ
propsΛߋ৽(?)͢Δํ๏ 1. react-domͷrenderΛ໌ࣔతʹୟ͘ 2. ରͷComponentΛߋ৽͢ΔͨΊͷϥο ύʔΛ࡞Δ (react-reduxํࣜ) ΄͔ʹΓํ͋Δ͔ʁ
None
None
Θʔ͍ɺͨʔͷ͠ʔ
՝ • ࡶʹ࡞ͬͨͭͳͷͰɺ͋ͱͪΐͬͱΈ ΛՃ͑ͳ͍ͱϥΠϒϥϦԽͰ͖ͳ͍ɻ • ReduxͰͦ͏͚ͩͲɺඇಉظॲཧΛͲ͜ʹ ஔ͘ͷʁ
·ͱΊ • Modern JavaScript ͍ͨͩ·boothͰൃചதͰ ͢ɻۀ൛͕ਐߦதͰ͢ɻ • FluxΞϓϦΛγϯϓϧʹ͢ΔͨΊͷσβΠϯ ύλʔϯ (ͳͷͰɺReactҎ֎ʹ͑Δ)
• Flux؆୯ʹ࡞ΕΔ https://tk-rabbit-house.booth.pm/items/489874
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ