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
Trying State Manegemant without Redux(updated)
Search
Nokogiri
October 25, 2019
Programming
1
1.4k
Trying State Manegemant without Redux(updated)
Reduxを利用せずに、React の Context と Hooksで状態管理してみる話
Nokogiri
October 25, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
Zustandを用いた実践的状態管理
undefined_name
3
590
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
170
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
350
FizzBuzzで学ぶOCP
undefined_name
0
130
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.9k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
600
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Other Decks in Programming
See All in Programming
🔨 小さなビルドシステムを作る
momeemt
4
680
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
Cache Me If You Can
ryunen344
2
700
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
320
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Being A Developer After 40
akosma
90
590k
Navigating Team Friction
lara
189
15k
GraphQLとの向き合い方2022年版
quramy
49
14k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Building an army of robots
kneath
306
46k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Transcript
Trying StateManagement without Redux updated
Taiki Nishi kintone։ൃνʔϜ ɾϑϩϯτόοΫΤϯυ ɾि̍ͰSlashνʔϜ ɾwww.nkgr.app ɾझຯɿ೫ࡔ46 ɹɹ Nokogiri(@nkgrnkgr)
ReduxΛར༻ͤͣʹɺ React ͷ Context ͱ HooksͰ ঢ়ଶཧͯ͠ΈΔ ͱ͍͏
Redux is Կʁ ɾϞμϯͳJSΞϓϦͷෳࡶͳঢ়ଶཧΛ༧ଌՄೳʹ͢Δػߏ ɾ୯Ұσʔλϑϩʔ View͔Βൃߦ͞ΕͨActionΛDispacherͰॲཧ͠ɺReducer͕Actionͱݱࡏͷ StateΛݩʹ৽͍͠StateΛฦ͢ ɾActionΛ࣮ߦ͢Δ͜ͱͰͲͷΑ͏ͳΛߋ৽ͦ͠ͷ݁Ռ͕Ͳ͏ͳΔͷ͔એ ݴతʹॻ͘͜ͱ͕Ͱ͖Δ
Redux is Կʁ ɾpropsόέπϦϨʔͷճආ ɾClassComponent -> ؔComponetͷҠߦ͍͢͠ ɾRedux Devtool ɺRedux-SagaͳͲपลϥΠϒϥϦΛؚΊΤίγεςϜ͕
Ͱ͖͍ͯΔ → React Redux మ൘
Redux࠷ߴ͡ΌΜ ͍ReduxͰ͍͍͡ΌΜ
ͳͥ Redux ΛΘͳ͍͔ʁ Redux ͷσϝϦοτ ɾهࡌ͕ ɾॳظڭҭίετߴΊ
ͳͥ Redux ΛΘͳ͍͔ʁ • ΞϓϦͷಛੑʹΑͬͯRedux͗͢Δ͜ͱ͕͋Δ • HooksͰؔComponentͰStateΛ͑ΔΑ͏ʹͳͬͨ • ContextΛͬͯɺωετͨ͠ίϯϙʔωϯτͰGlobalͳ ʹΞΫηεͰ͖Δ
• useReducerͱ͍͏Hooks͋Γಉ͡Α͏ͳ࣮Ͱ͖ͦ͏ • Hooks͕ग़ΔલrecomposeΛͬͯߴ֊ؔΛͬͯͨ → ͦ͜·ͰෳࡶͰͳ͍ΞϓϦͰɺReduxͳ͠Ͱӡ༻Ͱ͖Δ ͷͰʁ
ContextͱHooksΛͬͨStateཧ
ContextͱHooksΛͬͨStateཧ Context is Կʁ • ίϯϙʔωϯτπϦʔʹରͯ͠άϩʔόϧͱΈͳͤΔ • ҙͷΛValueͱͯ͠อ࣋Մೳ • https://ja.reactjs.org/docs/context.html
• APIs • React.createContext • Context.Provider
ContextͱHooksΛͬͨStateཧ Context is Կʁ
ContextͱHooksΛͬͨStateཧ Hooks is Կʁ • React 16.8 ͰՃ͞Εͨ৽ػೳ • useXXX
ͱ͍͏ͷ͕ಛ • StateͷཧͳͲReactͷػೳΛClassΛΘͣʹॻ͚Δ ɹhttps://ja.reactjs.org/docs/hooks-intro.html • APIs • useState • useContext • useEffect • useReducer
ContextͱHooksΛͬͨStateཧ Hooks - useContext • const {value} = useContext(HogeContext) •
ҾͰ͢Context͔ΒvalueΛऔΓग़ͤΔ
ContextͱHooksΛͬͨStateཧ Hooks - useState • const [value, setValue] = useState(initialValue)
• valueͱͦΕΛมߋՄೳͳؔΛΓʹ࣋ͭ
Context ͱ useStateΛ Έ߹Θͤͯ Stateཧͯ͠ΈΔ
ContextͱHooksΛͬͨStateཧ ContextͰStateͱؔΛཧ • ContextͷValueҙͷΛཧͰ͖Δ • ValueͰstateͱͦΕΛมߋՄೳͳؔΛཧ
ContextͱHooksΛͬͨStateཧ ContextͰStateͱؔΛཧ
͜ΕͰόέπϦϨʔͳ͠Ͱ GlobalStateʹΞΫηεͰ͖Δ
ContextͱHooksΛͬͨStateཧ طଘͷRedux͔Βͷஔ͖͑ʁ • ࠓ·ͰContainerComponentͰ͍ͬͯͨ mapStateToPropsɺmapDispatchToPropsΛuseContext ͔ΒऔΓग़ͨ͠useStateͷΓʹஔ͖͑Δ
ContextͱHooksΛͬͨStateཧ طଘͷRedux͔Βͷஔ͖͑ʁ • ReduxͰcomponentͷpropsʹ͜Μͳײ͡Ͱ߹͍ͯͨ͠
• εοΩϦʂ ContextͱHooksΛͬͨStateཧ طଘͷRedux͔Βͷஔ͖͑ʁ
ContextͱHooksΛͬͨStateཧ StateͷมߋཧΛݫີʹ͍ͨ͠ʁ • useStateͷΘΓʹuseReducerΛ͑Αͦ͞͏
ContextͱHooksΛͬͨStateཧ const [state, dispatch] = useReducer(reducer, initialSate) (state, action) =>
newState ͱ͍͏ܕͷϦσϡʔα (reducer) Λड͚ औΓɺݱࡏͷ state Λ dispatch ϝιουͱϖΞʹͯ͠ฦ͠·͢ɻ Hooks - useReducer
ContextͱHooksΛͬͨStateཧ Providerଆͷ࣮ Hooks - useReducer
ContextͱHooksΛͬͨStateཧ Consumerଆʢར༻ଆͷ࣮ʣ Hooks - useReducer
Reduxͳ͠Ͱঢ়ଶཧͰ͖ͦ͏
ݒ೦
ݒ೦ • ͦͦuseReducerهࡌͷ͞Λղܾ͠ͳ͍ • Redux-thunk, Redux-SagaͷΑ͏ͳඇಉظॲཧΛαϙʔ τ͢ΔϥΠϒϥϦͱ͔·ͩͳͦ͞͏ • ReduxDevTool͑ͳ͍ •
Contextຊདྷstyle themeͳͲཧ͢Δͷ • ConsumerΛར༻͢ΔίϯϙʔωϯτProviderͷมߋ Λड͚Δͱ࠶ඳը͞ΕΔͷͰɺύϑΥʔϚϯεʹӨڹ͕ ͋Δ
݁ • هࡌͷੑΛճආ͢Δ͜ͱͰ͖Δ • ReduxͷΤίγεςϜʹ͍Εͳ͍ͷͭΒ͍ • ΞϓϦέʔγϣϯͷαΠζײෳࡶ͞ʹΑͬͯ͋Γ ͔
ࢀߟϥΠϒϥϦ ContextΛ͏ϥΠϒϥϦ1 react-redux • Consumerͷه๏ Hooks͕ೖΔલͷॻ͖ํ • const { store
: { dispatch } } = useContext(ReactReduxContext)
ࢀߟϥΠϒϥϦ ContextΛ͏ϥΠϒϥϦ2 React Tracked • Super fast React global/shared state
with context and hooks • Pure ReactͩͱύϑΥʔϚϯε͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠