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
190
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
7.9k
Immutable.js with Flowtype
tohashi
0
7k
フロントエンドのモダン化とJavaScriptモジュールの 依存解決
tohashi
8
2.9k
Other Decks in Technology
See All in Technology
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
290
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
190
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
20240912 JJUGナイトセミナー
mii1004
0
140
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
370
Next.js のページ遷移を全力で止める
ypresto
3
1.6k
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7k
プログラム検証入門
riru
6
860
グイグイ系QAマネージャーの仕事
sadonosake
0
290
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.3k
Technical Writing Meetup vol.35
soracom
PRO
2
110
Featured
See All Featured
The Invisible Side of Design
smashingmag
295
50k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
A Philosophy of Restraint
colly
202
16k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Designing for humans not robots
tammielis
248
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
Gamification - CAS2011
davidbonilla
79
5k
Speed Design
sergeychernyshev
22
430
The Language of Interfaces
destraynor
153
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Web Components: a chance to create the future
zenorocha
308
42k
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 Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͜͜ʹΤϥʔϋϯυϦϯάೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶཧΛߟ͍͖͑ͯ·͠ΐ͏