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
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
130
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
Avatar for Kosuke ENOMOTO coosuke
PRO
1
300
自分を理解するAI時代の準備 〜マイプロフィールMCPの実装〜
Avatar for edo edo_m18
0
110
OTFSG勉強会 / Introduction to the History of Delta Lake + Iceberg
Avatar for Databricks Japan databricksjapan
0
110
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
Avatar for Belong inc. belongadmin
3
170
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
Avatar for Hideaki Aoyagi hideakiaoyagi
1
140
SFTPコンテナからファイルをダウンロードする
Avatar for ディップ株式会社 dip
0
480
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
390
20250623 Findy Lunch LT Brown
Avatar for Brown 3150
0
650
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
Avatar for ykagano ykagano
1
1.3k
Snowflake Intelligenceで 実現できるノーコードAI活用
Avatar for tak takumimukaiyama
1
280
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
380

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
780
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
930
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
43
2.4k

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