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.3k
Trying State Manegemant without Redux(updated)
Reduxを利用せずに、React の Context と Hooksで状態管理してみる話
Nokogiri
October 25, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
160
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
4
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
330
FizzBuzzで学ぶOCP
undefined_name
0
110
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.8k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.6k
モププロ@kintone開発チーム
undefined_name
1
590
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
810
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
5
2.4k
Goで作る、開発・CI環境
sin392
0
220
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
AIともっと楽するE2Eテスト
myohei
0
330
Team operations that are not burdened by SRE
kazatohiei
1
310
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
効率的な開発手段として VRTを活用する
ishkawa
0
130
Is Xcode slowly dying out in 2025?
uetyo
1
260
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Building Applications with DynamoDB
mza
95
6.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Music & Morning Musume
bryan
46
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
We Have a Design System, Now What?
morganepeng
53
7.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Bash Introduction
62gerente
614
210k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
4 Signs Your Business is Dying
shpigford
184
22k
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ͩͱύϑΥʔϚϯε͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠