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
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
260
物価高なラスベガスでの過ごし方
zakky
0
350
バクラクにおける可観測性向上の取り組み
yuu26
3
400
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
170
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.1k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Gamification - CAS2011
davidbonilla
80
5k
A Philosophy of Restraint
colly
203
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Side Projects
sachag
452
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Visualization
eitanlees
144
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
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 Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͜͜ʹΤϥʔϋϯυϦϯάೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶཧΛߟ͍͖͑ͯ·͠ΐ͏