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
230

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.8k
Immutable.js with Flowtype
Avatar for Takumi Ohashi tohashi
0
7.3k
フロントエンドのモダン化とJavaScriptモジュールの
依存解決
Avatar for Takumi Ohashi tohashi
8
3.1k

Other Decks in Technology

See All in Technology
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
Avatar for kubo ayumu boro1234
0
1.1k
『君の名は』と聞く君の名は。 / Your name, you who asks for mine.
Avatar for NTT docomo Business nttcom
1
130
2025-12-27 Claude CodeでPRレビュー対応を効率化する@機械学習社会実装勉強会第54回
Avatar for Naka Masato nakamasato
4
1.3k
ルネサンス開発者を育てる 1on1支援AIエージェント
Avatar for Yusuke Shimizu yusukeshimizu
0
120
AWSに革命を起こすかもしれない新サービス・アップデートについてのお話
Avatar for Yuuki Yamashita yama3133
0
530
AWSインフルエンサーへの道 / load of AWS Influencer
Avatar for WHIsaiyo whisaiyo
0
240
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
19
3.3k
Building Serverless AI Memory with Mastra × AWS
Avatar for vvatanabe vvatanabe
1
800
ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素
Avatar for そのだ sonoda_mj
6
1.9k
普段使ってるClaude Skillsの紹介(by Notebooklm)
Avatar for Higuchi kokoro zerebom
8
2.6k
Everything As Code
Avatar for わいわい yosuke_ai
0
360

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
240
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
260
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
450
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
320
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1k

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 Λڐ༰Ͱ͖Δ͔Ͳ͏͔ • ࣮ࡍ͸͜͜ʹΤϥʔϋϯυϦϯά΋ೖͬͯ͘Δ • ࠷ڧͷϩʔσΟϯάঢ়ଶ؅ཧΛߟ͍͖͑ͯ·͠ΐ͏