Yet another side effect layer for Redux

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. ͝ਗ਼ௌ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·ͨ͠