Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Trying State Manegemant without Redux(updated)
Nokogiri
October 25, 2019
Programming
1
1k
Trying State Manegemant without Redux(updated)
Reduxを利用せずに、React の Context と Hooksで状態管理してみる話
Nokogiri
October 25, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
モププロ@kintone開発チーム
undefined_name
1
310
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
850
Usefull GitLens
undefined_name
3
530
kintone開発チームにジョインして6カ月の所感
undefined_name
1
230
Learning-Hooks
undefined_name
0
450
5分で紹介するエンジニアの知的生産術
undefined_name
0
46
登壇者にフィードバックしてみよう
undefined_name
0
33
Does react-redux-firebase spark joy?
undefined_name
1
60
Kotlin+Springbootでサービスを作ってKotlinを好きになったのでその良さを紹介する
undefined_name
0
230
Other Decks in Programming
See All in Programming
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
250
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
260
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
390
存在しないアセットへの参照と 未公開アセットでのネタバレに どう立ち向かうか / How to prevent missing assets and spoilers by assets
orgachem
0
180
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
140
What's new in Shopware 6.5
shyim
0
110
Circuit⚡
monaapk
0
200
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
740
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
200
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
620
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
230
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
For a Future-Friendly Web
brad_frost
166
7.8k
Gamification - CAS2011
davidbonilla
75
4.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Git: the NoSQL Database
bkeepers
PRO
419
60k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Code Review Best Practice
trishagee
50
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
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ͩͱύϑΥʔϚϯε͕͋ΔͷͰͦΕΛղܾ͠ɺ͞Βʹ؆ܿʹॻ͚Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠