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
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.6k
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
ローカル環境でAIを動かそう!
falken
PRO
1
160
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
280
MCP Clientを活用するための設計と実装上の工夫
yudai00
0
670
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
1
1.2k
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
10
5k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
スプリントゴールで価値を駆動しよう
takufujii
3
1.6k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
460
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
300
“新卒らしさ”を脱ぎ捨てて 〜1年を経て学んだこと〜
rebase_engineering
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How to train your dragon (web standard)
notwaldorf
92
6k
How GitHub (no longer) Works
holman
314
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Embracing the Ebb and Flow
colly
85
4.7k
A Tale of Four Properties
chriscoyier
159
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
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 Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͜͜ʹΤϥʔϋϯυϦϯάೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶཧΛߟ͍͖͑ͯ·͠ΐ͏