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
240
2

How to control loading state in React

Meguro.es #18

Avatar for Takumi Ohashi

Takumi Ohashi

December 06, 2018

More Decks by Takumi Ohashi

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

Other Decks in Technology

See All in Technology
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
2
430
Does an AI Watermark Survive Translation?
Avatar for Es C machinetranslation
0
520
いかに伝えるか　〜新卒エンジニアの教育のための、ライトノベル活用の一例
Avatar for Akira Ikeda（池田 暁） ikedon
1
190
AI時代に、プロダクトの数だけ積み上がる所有コストをどうエンジニアリングするか / Engineering the Cost of Ownership
Avatar for Kazuki Maeda kzkmaeda
0
960
【試作】IoT x AIエージェント
Avatar for コロッケそば happysamurai294
0
120
本番に近いテストをもっと手軽に - Postmanで広がるAPIテストの世界 / Expanding the World of API Testing with Postman
Avatar for Yoichi Kawasaki yokawasa
1
250
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
Avatar for Aki / @LoveIdahoBurger aki_iinuma
4
3.5k
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
170
データエンジニアの困りごとをDevinと一緒に解消する
Avatar for 10xinc 10xinc
2
790
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
Avatar for Michael Tedder falken
PRO
0
210
ブラウザアプリの継続的パフォーマンスモニタリング (序) / Continuous Browser Application Performance Monitoring; Act 1
Avatar for moznion moznion
0
110
AI活用の現在地、 ちゃんと見えてますか？/XPfest-2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
140

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
490
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Side Projects
Avatar for Sacha Greif sachag
455
43k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
660

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