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.3k
Immutable.js with Flowtype
tohashi
0
7.2k
フロントエンドのモダン化とJavaScriptモジュールの 依存解決
tohashi
8
3k
Other Decks in Technology
See All in Technology
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
370
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
170
本当にわかりやすいAIエージェント入門
segavvy
9
5.3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
11
2.6k
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
360
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
360
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
地図と生成AI
nakasho
0
550
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
640
Data Engineering Study#30 LT資料
tetsuroito
1
520
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
110
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
BBQ
matthewcrist
89
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How GitHub (no longer) Works
holman
314
140k
How to train your dragon (web standard)
notwaldorf
96
6.1k
For a Future-Friendly Web
brad_frost
179
9.8k
Building an army of robots
kneath
306
45k
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 Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͜͜ʹΤϥʔϋϯυϦϯάೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶཧΛߟ͍͖͑ͯ·͠ΐ͏