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

Yet another side effect layer for Redux

Yet another side effect layer for Redux

D17a4e9757277ae86855e4b561ca0015?s=128

Daisuke Mino

April 24, 2018
Tweet

More Decks by Daisuke Mino

Other Decks in Programming

Transcript

  1. Yet another side effect layer for Redux Scramble! #1 @minodisk

  2. Redux͕΍Δ͜ͱ άϩʔόϧεςʔτΛҡ࣋͢ΔͨΊͷ࣮૷ • Connector • Dispatcher • Reducer • Store

  3. Redux͕΍Βͳ͍͜ͱ ෭࡞༻ͷ͋ΔॲཧΛॻ͘৔ॴͷఏڙ • API΍τϥοΩϯά༻ϝιουͷίʔϧ • Local Storage΍Cookie΁ͷΞΫηε • ReactΞϓϦέʔγϣϯ֎ͷDOMૢ࡞

  4. Ͳ͜Ͱ΍Δ͔ʁ େ͖͘෼͚Δͱ͜Μͳ೿ൊ͕͋Γͦ͏ • ComponentͰ΍Δ • Actionൃߦલʹ΍Δ redux-thunk • ActionൃߦޙɺReduceલʹ΍Δ redux-saga

  5. Ͳ͜Ͱ΍Δ͔ʁ • ComponentͰ΍Δͷ͸໰୊֎ • redux-thunk͸ActionΛDispatch͢Δͷ͔ Action DispatcherΛDispatch͢Δͷ͔౷Ұײ͕ ͳ͍ίʔυʹͳͬͯ͠·͏ • redux-saga͸ผϨΠϠʔͰ΍ΔͷͰɺ


    ֤ϨΠϠʔ͕ͦΕͧΕͷ੹຿ʹूதͰ͖Δ
  6. redux-sagaͷΑ͞ • ֤ϨΠϠʔ͕ࣗ਎ͷ੹຿ʹूதͰ͖Δ • View͸ActionΛൃߦ͢Δ͚ͩ • ෭࡞༻ϨΠϠʔͰ͸ActionΛड͚औΓɺ ActionΛൃߦ͢Δ͚ͩ • ActionͷTypeΛϑοΫͯ͠ॲཧΛࣗ༝ʹॻ͚Δ

  7. redux-sagaͷͭΒΈ • Generatorਏ͍ • ςετਏ͍ • Effectsؔ਺ਏ͍

  8. ສೳނͷਏΈ • GeneratorͳΒશͯͷ͜ͱ͕Ͱ͖Δ͔΋͠Εͳ ͍ • ݱ࣮ʹҰൠతͳWebΞϓϦέʔγϣϯͰॻ͘ ॲཧͷ99%͸Async/Await/Promise.allͰ΍ͬ ͍͚ͯΔ୯७ͳίʔυ • 1%ΛຒΊΔͨΊʹෳࡶੑ͕ۃ·ͬͯΔ

  9. Զୡ͕ཉ͔ͬͨ͠΋ͷ

  10. Image by www.projectcartoon.com / CC BY 3.0

  11. ࡞ͬͨ

  12. redux-spork

  13. Spork is Կ?

  14. Spoon x Fork Image by Wtshymanski at English Wikipedia /

    CC BY-SA 3.0
  15. Specifications • action.typeΛΩʔʹcallbackΛొ࿥͢Δ • callback͸ͨͩͷfunctionͰɺasyncʹ΋Ͱ͖Δ • callbackʹ౉͞ΕΔdispatchϝιουͰผactionΛൃߦ • ൃߦ͞Εͨaction͸࠶ϑοΫ͞Εcallback͕ݺ͹ΕΔ •

    1-action:N-callback, N-action:1-callback
  16. Fork

  17. Component Reducer Action

  18. Component Reducer Fork Action

  19. Component Reducer Fork Action Action Dispatch

  20. Component Reducer Fork Action Action Dispatch Action

  21. Component Reducer Fork Action Action Dispatch Fork

  22. Component Reducer Fork Action Action Dispatch

  23. Component Reducer Fork Action Action Dispatch

  24. Component Reducer ORDER USER_FETCH USER_FETCHED

  25. Merge

  26. Component Reducer ORDER Merge USER_FETCH USER_FETCHED

  27. ͜Μͳ͔Μ͡ 1 fork('ORDER', async (action, dispatch) => {¬ 2 dispatch({

    type: 'USER_FETCH', action.payload.userID })¬ 3 const { payload } = await merge('USER_FETCHED')¬ 4 const resp = await fetch(`/api/orders`, {¬ 5 method: 'POST',¬ 6 body: JSON.stringify({ productID: action.payload.productID }),¬ 7 })¬ 8 dispatch({ type: 'ORDERED', payload: JSON.parse(resp.body) })¬ 9 })
  28. ͱ͜ΖͰ

  29. redux-observable ʹࢥ૝͕ࣅͯΔΑͶʁ

  30. Spork Image by Wtshymanski at English Wikipedia / CC BY-SA

    3.0
  31. Observable Image by Dave Taylor at Flickr / CC BY

    2.0
  32. ·ͱΊ • ϨΠϠʔ͕੾Γ෼͚ΒΕΔ • ੹຿ͷ෼཭ • γϯϓϧ • Async/AwaitͰ΍͍͖ͬͯ

  33. Repository • https://github.com/folio-sec/redux-spork • https://www.npmjs.com/package/redux- spork

  34. ͝ਗ਼ௌ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·ͨ͠