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
How to control loading state in React
Search
Takumi Ohashi
December 06, 2018
Technology
2
200
How to control loading state in React
Meguro.es #18
Takumi Ohashi
December 06, 2018
Tweet
Share
More Decks by Takumi Ohashi
See All by Takumi Ohashi
freee Tech Night #2 会計freee 7年目のフロントエンド開発
tohashi
1
8.2k
Immutable.js with Flowtype
tohashi
0
7.2k
フロントエンドのモダン化とJavaScriptモジュールの 依存解決
tohashi
8
3k
Other Decks in Technology
See All in Technology
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
270
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
1.5k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
rubygem開発で鍛える設計力
joker1007
2
200
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
2
1k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
Github Copilot エージェントモードで試してみた
ochtum
0
100
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Optimizing for Happiness
mojombo
379
70k
Code Review Best Practice
trishagee
68
18k
Typedesign – Prime Four
hannesfritz
42
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Thoughts on Productivity
jonyablonski
69
4.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf 2023
tenderlove
30
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Scaling GitHub
holman
459
140k
Transcript
3FBDUͰ ϩʔσΟϯάΛ Ͳ͏ѻ͏͔ @_tohashi
ൃද͢Δਓ • Takumi Ohashi • @_tohashi • freee
࿑ಇڥ • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯ • ςʔϒϧ 600ڧ • js 40ສߦऑ •
React, flux, flowtype
࣏҆ҡ࣋ • ਓίʔυଟ͍ • ESLint, Prettier • ੩తʹղੳͰ͖ͳ͍ͷ • ίϯϙʔωϯτσʔλϑϩʔͷ࣮ํ
• ׂͷཻ, SFC • HOC, render props • ঢ়ଶཧ
ίϯϙʔωϯτͷঢ়ଶཧ • Ͳ͜Ͱཧ͖͔͢ • ϑΥʔϜͷೖྗ • μΠΞϩάͷ։ด • ඇಉظॲཧதͷεϐφʔදࣔ •
ઃܭ࣮ͷํ͔Ε͕ͪ • υΩϡϝϯταϯϓϧʹΑͬͯҧ͏
Redux ͷ FAQ
ίϯϙʔωϯτͷঢ়ଶཧ • ཁదٓஅ • ΞϓϦέʔγϣϯͷنɺཁ݅ɺར༻͢Δϥ ΠϒϥϦʹΑΔ • ҉ʹͳΓ͕ͪ • νʔϜ։ൃͳΒࢦͷ౷Ұඞཁ
ϩʔσΟϯά • APIϦΫΤετதʹεϐφʔΛදࣔͨ͠Γɺଞ ͷૢ࡞ΛϒϩοΫͨ͠Γ • ίϯϙʔωϯτͷঢ়ଶͰ͋Δ͕ඇಉظॲཧ ActionCreator ଆͰߦΘΕΔ
ϩʔσΟϯάͷ ࣮όϦΤʔγϣϯ
ίϯϙʔωϯτͰ݁
ίϯϙʔωϯτͰ݁ • ϚϯτޙʹҰ͚ͩAPIϦΫΤετΛૹ ΓɺͦͷϨεϙϯεͷϖΠϩʔυΛͬͯί ϯςϯπΛඳը • ϛχϚϜͳ React ΞϓϦέʔγϣϯ
ίϯϙʔωϯτͰ݁
ίϯϙʔωϯτͰ݁
ίϯϙʔωϯτͰ݁ ʢෳճͷϦΫΤετʣ • ϢʔβʔͷΞΫγϣϯʹԠͯ͡ෳճϦΫΤ ετΛૹΔ • ϖʔδωʔγϣϯͳͲ
ίϯϙʔωϯτͰ݁ ʢෳճͷϦΫΤετʣ • v
ίϯϙʔωϯτͰ݁ ʢෳճͷϦΫΤετʣ
Store ͷ State ͱͯ͠ཧ
Store ͷ Stateͱͯ͠ཧ • w/Redux • ϩʔσΟϯάͷঢ়ଶ Store ͷ State
ͱͯ͠ѻ ͏ • ίϯϙʔωϯτΛ presentational ʹͰ͖Δ
Store ͷ Stateͱͯ͠ཧ
Store ͷ Stateͱͯ͠ཧ
ϦετϏϡʔ • ϦετʹෳͷΞΠςϜ • ΞΠςϜ୯ҐͰฤूͯ͠ߋ৽ • ΞΠςϜ͝ͱʹϩʔσΟϯάͷঢ়ଶΛ࣋ͭ
ϦετϏϡʔ
ϦετϏϡʔ
ϦετϏϡʔ
ϩʔσΟϯάྃޙͷΞΫγϣϯ • ʮอଘ͠·ͨ͠ʯͳͲͷϝοηʔδ Notification ͷදࣔ • ϩʔσΟϯά͕ྃͨ͠ޙͷҰճ͚ͩൃੜ͞ ͍ͤͨ • ࣌ؒܦաϢʔβʔͷΞΫγϣϯͰফ͑Δ
ϩʔσΟϯάྃޙͷΞΫγϣϯ
ϩʔσΟϯάྃޙͷΞΫγϣϯ
ΑΓେنͳΞϓϦέʔγϣϯ • ReducerͷංେԽ • API͝ͱʹREQUEST, SUCCESS, (FAILED) • LoadingReducerͳͲʹׂ •
LoadingStateͷόέπϦϨʔ • Context API
ίϯϙʔωϯτͷ State ͱͯ͠ཧ
ίϯϙʔωϯτͷ Stateͱͯ͠ ཧ • Store ͷ State άϩʔόϧ • ϩʔσΟϯάίϯϙʔωϯτͷঢ়ଶͱͯ͠
͍݁ͤͨ͞ • ͔ͭ Redux ͷσʔλϑϩʔͱΈ߹ΘͤΔ
ίϯϙʔωϯτͷ State ͱͯ͠ ཧ
ίϯϙʔωϯτͷ State ͱͯ͠ ཧ
ίϯϙʔωϯτͷ State ͱͯ͠ ཧ
Suspense
Suspense • ϞδϡʔϧͷԆϩʔυඇಉظॲཧ͕ྃ ͢Δ·ͰϨϯμϦϯάΛ suspend Ͱ͖Δ • ϞδϡʔϧͷԆϩʔυ v16.6 ͔Β
• ඇಉظॲཧ mid 2019 ·Ͱʹʢ༧ఆʣ
Suspense
Suspense
Suspense • ۜͷؙͰͳ͍ • Ϧιʔεͷߋ৽ͳͲσʔλϑΣονҎ֎ͷॲཧ ैདྷ௨Γ͍ͬͯ͘ඞཁ͕͋Δ • ΩϟογϡཧϛεΔͱ͍ • ࠷ѱϨϯμϦϯάຖʹ
API ϦΫΤετ͕ඈͿ
͓ΘΓʹ • ϩʔσΟϯάҰͭͱ࣮ͬͯํ๏༷ʑ • ࣗ Store ͷ State ->
ਏ͘ͳͬͯίϯϙʔωϯτͷ State ʹ • ίϯϙʔωϯτͷ async Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͜͜ʹΤϥʔϋϯυϦϯάೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶཧΛߟ͍͖͑ͯ·͠ΐ͏