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

How to control loading state in React

4d0bec5f32c219c0f5d4280a2a4b250a?s=47 Takumi Ohashi
December 06, 2018

How to control loading state in React

Meguro.es #18

4d0bec5f32c219c0f5d4280a2a4b250a?s=128

Takumi Ohashi

December 06, 2018
Tweet

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