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
640
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
180
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
360
FizzBuzzで学ぶOCP
undefined_name
0
130
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.9k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
610
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Other Decks in Programming
See All in Programming
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
What's new in Spring Modulith?
olivergierke
1
140
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
170
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
710
Software Architecture
hschwentner
6
2.3k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Serena MCPのすすめ
wadakatu
4
990
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimizing for Happiness
mojombo
379
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
339
57k
Automating Front-end Workflow
addyosmani
1371
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Visualization
eitanlees
149
16k
Embracing the Ebb and Flow
colly
88
4.8k
A better future with KSS
kneath
239
18k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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ͩͱύϑΥʔϚϯε͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠