Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to control loading state in React

Avatar for Takumi Ohashi Takumi Ohashi
December 06, 2018
Technology
2
200

How to control loading state in React

Meguro.es #18
Avatar for Takumi Ohashi

Takumi Ohashi

December 06, 2018
Tweet

More Decks by Takumi Ohashi

See All by Takumi Ohashi
freee Tech Night #2 会計freee 7年目のフロントエンド開発
Avatar for Takumi Ohashi tohashi
1
8.2k
Immutable.js with Flowtype
Avatar for Takumi Ohashi tohashi
0
7.2k
フロントエンドのモダン化とJavaScriptモジュールの
依存解決
Avatar for Takumi Ohashi tohashi
8
3k

Other Decks in Technology

See All in Technology
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
Avatar for Genki Sano sanogemaru
10
5.6k
AIオンボーディングとAIプロセスマイニング
Avatar for Ryuya Nakamura nrryuya
5
1.3k
ローカル環境でAIを動かそう！
Avatar for Michael Tedder falken
PRO
1
160
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
280
MCP Clientを活用するための設計と実装上の工夫
Avatar for Yudai Hayashi yudai00
0
670
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
Avatar for きむそん kimuson
1
1.2k
大事なのは、AIの精度だけじゃない！〜1円のズレも許されない経理領域とAI〜
Avatar for Jun Nemoto jun_nemoto
10
5k
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k
スプリントゴールで価値を駆動しよう
Avatar for Taku Fujii takufujii
3
1.6k
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
Avatar for cohalz cohalz
1
460
LT:組込み屋さんのオシロが壊れた！
Avatar for windy windy_pon
0
300
“新卒らしさ”を脱ぎ捨てて 〜1年を経て学んだこと〜
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
120

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.4k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
123
52k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.3k

Transcript

  1. 3FBDUͰ ϩʔσΟϯάΛ Ͳ͏ѻ͏͔ @_tohashi

  2. ൃද͢Δਓ • Takumi Ohashi • @_tohashi • freee

  3. ࿑ಇ؀ڥ • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯ • ςʔϒϧ 600ڧ • js 40ສߦऑ •

    React, flux, flowtype

  4. ࣏҆ҡ࣋ • ਓ΋ίʔυ΋ଟ͍ • ESLint, Prettier • ੩తʹղੳͰ͖ͳ͍΋ͷ • ίϯϙʔωϯτ΍σʔλϑϩʔͷ࣮૷ํ਑

    • ෼ׂͷཻ౓, SFC • HOC, render props • ঢ়ଶ؅ཧ

  5. ίϯϙʔωϯτͷঢ়ଶ؅ཧ • Ͳ͜Ͱ؅ཧ͢΂͖͔ • ϑΥʔϜͷೖྗ஋ • μΠΞϩάͷ։ด • ඇಉظॲཧதͷεϐφʔදࣔ •

    ઃܭ΍࣮૷ͷํ਑෼͔Ε͕ͪ • υΩϡϝϯτ΍αϯϓϧʹΑͬͯ΋ҧ͏

  6. Redux ͷ FAQ

  7. ίϯϙʔωϯτͷঢ়ଶ؅ཧ • ཁ͸దٓ൑அ • ΞϓϦέʔγϣϯͷن໛ɺཁ݅ɺར༻͢Δϥ ΠϒϥϦʹΑΔ • ҉໧஌ʹͳΓ͕ͪ • νʔϜ։ൃͳΒࢦ਑ͷ౷Ұ͸ඞཁ

  8. ϩʔσΟϯά • APIϦΫΤετதʹεϐφʔΛදࣔͨ͠Γɺଞ ͷૢ࡞ΛϒϩοΫͨ͠Γ • ίϯϙʔωϯτͷঢ়ଶͰ͸͋Δ͕ඇಉظॲཧ ͸ ActionCreator ଆͰߦΘΕΔ

  9. ϩʔσΟϯάͷ ࣮૷όϦΤʔγϣϯ

  10. ίϯϙʔωϯτ಺Ͱ׬݁

  11. ίϯϙʔωϯτ಺Ͱ׬݁ • Ϛ΢ϯτ௚ޙʹҰ౓͚ͩAPIϦΫΤετΛૹ ΓɺͦͷϨεϙϯεͷϖΠϩʔυΛ࢖ͬͯί ϯςϯπΛඳը • ϛχϚϜͳ React ΞϓϦέʔγϣϯ

  12. ίϯϙʔωϯτ಺Ͱ׬݁

  13. ίϯϙʔωϯτ಺Ͱ׬݁

  14. ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ • ϢʔβʔͷΞΫγϣϯʹԠͯ͡ෳ਺ճϦΫΤ ετΛૹΔ • ϖʔδωʔγϣϯͳͲ

  15. ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ • v

  16. ίϯϙʔωϯτ಺Ͱ׬݁
 ʢෳ਺ճͷϦΫΤετʣ

  17. Store ͷ State ͱͯ͠؅ཧ

  18. Store ͷ Stateͱͯ͠؅ཧ • w/Redux • ϩʔσΟϯάͷঢ়ଶ΋ Store ͷ State

    ͱͯ͠ѻ ͏ • ίϯϙʔωϯτΛ presentational ʹͰ͖Δ

  19. Store ͷ Stateͱͯ͠؅ཧ

  20. Store ͷ Stateͱͯ͠؅ཧ

  21. ϦετϏϡʔ • Ϧετ಺ʹෳ਺ͷΞΠςϜ • ΞΠςϜ୯ҐͰฤूͯ͠ߋ৽ • ΞΠςϜ͝ͱʹϩʔσΟϯάͷঢ়ଶΛ࣋ͭ

  22. ϦετϏϡʔ

  23. ϦετϏϡʔ

  24. ϦετϏϡʔ

  25. ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ • ʮอଘ͠·ͨ͠ʯͳͲͷϝοηʔδ΍ Notification ͷදࣔ • ϩʔσΟϯά͕׬ྃͨ͠ޙͷҰճ͚ͩൃੜ͞ ͍ͤͨ • ࣌ؒܦա΍ϢʔβʔͷΞΫγϣϯͰফ͑Δ

  26. ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ

  27. ϩʔσΟϯά׬ྃޙͷΞΫγϣϯ

  28. ΑΓେن໛ͳΞϓϦέʔγϣϯ • ReducerͷංେԽ • API͝ͱʹREQUEST, SUCCESS, (FAILED) • LoadingReducerͳͲʹ෼ׂ •

    LoadingStateͷόέπϦϨʔ • Context API

  29. ίϯϙʔωϯτͷ State ͱͯ͠؅ཧ

  30. ίϯϙʔωϯτͷ Stateͱͯ͠ ؅ཧ • Store ͷ State ͸άϩʔόϧ • ϩʔσΟϯά͸ίϯϙʔωϯτͷঢ়ଶͱͯ͠

    ׬͍݁ͤͨ͞ • ͔ͭ Redux ͷσʔλϑϩʔͱ૊Έ߹ΘͤΔ

  31. ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

  32. ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

  33. ίϯϙʔωϯτͷ State ͱͯ͠ ؅ཧ

  34. Suspense

  35. Suspense • Ϟδϡʔϧͷ஗Ԇϩʔυ΍ඇಉظॲཧ͕׬ྃ ͢Δ·ͰϨϯμϦϯάΛ suspend Ͱ͖Δ • Ϟδϡʔϧͷ஗Ԇϩʔυ͸ v16.6 ͔Β

    • ඇಉظॲཧ͸ mid 2019 ·Ͱʹʢ༧ఆʣ

  36. Suspense

  37. Suspense

  38. Suspense • ۜͷ஄ؙͰ͸ͳ͍ • Ϧιʔεͷߋ৽ͳͲσʔλϑΣονҎ֎ͷॲཧ ͸ैདྷ௨Γ΍͍ͬͯ͘ඞཁ͕͋Δ • Ωϟογϡ؅ཧϛεΔͱ΍͹͍ • ࠷ѱϨϯμϦϯάຖʹ

    API ϦΫΤετ͕ඈͿ

  39. ͓ΘΓʹ • ϩʔσΟϯάҰͭͱͬͯ΋࣮૷ํ๏͸༷ʑ • ࣗ෼͸ Store ͷ State ೿ ->

    ਏ͘ͳͬͯίϯϙʔωϯτͷ State ʹ • ίϯϙʔωϯτͷ async Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͸͜͜ʹΤϥʔϋϯυϦϯά΋ೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶ؅ཧΛߟ͍͖͑ͯ·͠ΐ͏