Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Ͳ͜Ͱ΍Δ͔ʁ • ComponentͰ΍Δͷ͸໰୊֎ • redux-thunk͸ActionΛDispatch͢Δͷ͔ Action DispatcherΛDispatch͢Δͷ͔౷Ұײ͕ ͳ͍ίʔυʹͳͬͯ͠·͏ • redux-saga͸ผϨΠϠʔͰ΍ΔͷͰɺ
 ֤ϨΠϠʔ͕ͦΕͧΕͷ੹຿ʹूதͰ͖Δ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Զୡ͕ཉ͔ͬͨ͠΋ͷ

Slide 10

Slide 10 text

Image by www.projectcartoon.com / CC BY 3.0

Slide 11

Slide 11 text

࡞ͬͨ

Slide 12

Slide 12 text

redux-spork

Slide 13

Slide 13 text

Spork is Կ?

Slide 14

Slide 14 text

Spoon x Fork Image by Wtshymanski at English Wikipedia / CC BY-SA 3.0

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Fork

Slide 17

Slide 17 text

Component Reducer Action

Slide 18

Slide 18 text

Component Reducer Fork Action

Slide 19

Slide 19 text

Component Reducer Fork Action Action Dispatch

Slide 20

Slide 20 text

Component Reducer Fork Action Action Dispatch Action

Slide 21

Slide 21 text

Component Reducer Fork Action Action Dispatch Fork

Slide 22

Slide 22 text

Component Reducer Fork Action Action Dispatch

Slide 23

Slide 23 text

Component Reducer Fork Action Action Dispatch

Slide 24

Slide 24 text

Component Reducer ORDER USER_FETCH USER_FETCHED

Slide 25

Slide 25 text

Merge

Slide 26

Slide 26 text

Component Reducer ORDER Merge USER_FETCH USER_FETCHED

Slide 27

Slide 27 text

͜Μͳ͔Μ͡ 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 })

Slide 28

Slide 28 text

ͱ͜ΖͰ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Observable Image by Dave Taylor at Flickr / CC BY 2.0

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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