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
1
460
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
160
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
4
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
340
FizzBuzzで学ぶOCP
undefined_name
0
120
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.9k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
590
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Other Decks in Programming
See All in Programming
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
180
GPUを計算資源として使おう!
primenumber
1
290
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.6k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
240
効率的な開発手段として VRTを活用する
ishkawa
1
180
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
階層化自動テストで開発に機動力を
ickx
1
430
リッチエディターを安全に開発・運用するために
unachang113
1
260
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
850
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
PHPカンファレンス関西2025 基調講演
sugimotokei
5
960
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Done Done
chrislema
184
16k
Visualization
eitanlees
146
16k
Thoughts on Productivity
jonyablonski
69
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Raft: Consensus for Rubyists
vanstee
140
7k
Being A Developer After 40
akosma
90
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Git: the NoSQL Database
bkeepers
PRO
431
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Practical Orchestrator
shlominoach
189
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ͩͱύϑΥʔϚϯε͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠