redux-pluto

Folio Scramble! #1 で話した redux best practiceの話です。

1. redux-pluto 2018/04/19 @ Folio Meetup # Scramble! #1
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. redux-pluto • ϦΫϧʔτςΫϊϩδʔζࣾͰ։ൃதͷϘΠϥʔϓ Ϩʔτ • େن໛։ൃ޲͚ɺϕετϓϥΫςΟεΛूΊͨ΋ ͷ • ͪͳΈʹ·ͩ։ൃதͳͷͰࠓ೔͸ϦϙδτϦ͸ެ ։Ͱ͖ͳ͍Ͱ͢ɺӶҙקΊதͰ͢ɻ
 ͍͢·ͤΜɺɺɺ
4. redux-pluto • ϦΫϧʔτςΫϊϩδʔζࣾͰ։ൃதͷϘΠϥʔϓ Ϩʔτ • େن໛։ൃ޲͚ɺϕετϓϥΫςΟεΛूΊͨ΋ ͷ • ͪͳΈʹ·ͩ։ൃதͳͷͰࠓ೔͸ϦϙδτϦ͸ެ ։Ͱ͖ͳ͍Ͱ͢ɺӶҙקΊதͰ͢ɻ
 ͍͢·ͤΜɺɺɺ ࠓ೔͸͜ͷϕετϓϥΫςΟεΛ
   νϥݟͤ
5. ϕετϓϥΫςΟε ΞʔΩςΫνϟฤ
6. ϕετϓϥΫςΟε 1
 ඇಉظσʔλϩʔυ
7. ඇಉظσʔλϩʔυ • redux-async-loader • SSRͰ΋CSRͰ΋ಈ͘σʔλFetchؔ਺Λఏڙ ͯ͘͠ΕΔ • σʔλFetchத͸ReactͷrenderΛ͠ͳ͍࡞Γ
8. ඇಉظσʔλϩʔυ • redux-async-loader import { compose } from 'recompose'; export default compose( // CSR Ͱ΋ SSR Ͱ΋྆ํಈ͘ // σʔλ͕ϩʔυ͞ΕͯΔͱloading state͕trueʹͳΓɺͦͷظؒ͸ // component͕render͞Εͳ͍ɻ asyncLoader((props, { dispatch }) => dispatch(loadUsers(props))), connect({ ... }, { ... }) )(class UserList exptends React.Component { // ... });
9. ඇಉظσʔλϩʔυ • ଞͷOSSࣄྫ • CyberAgent: https://github.com/kouhin/redux- dataloader • Next.js: getInitialProps https://github.com/zeit/ next.js/blob/master/examples/with-redux/pages/ index.js#L8-L13 • Nuxt.js: asyncData
10. ඇಉظσʔλϩʔυ • Ͳͷํ๏Ͱ΋͍͍ͩͨಉ͕ͩ͡ɺredux-async- loader͸Ͳ͜ͷίϯϙʔωϯτ͔ΒͰ΋ඇಉظ σʔλϩʔυͰ͖Δɻ • Next.js, Nuxt.js ͷ΋ͷ͸RootͰͷΈൃՐՄೳ • େن໛։ൃͩͱ్தͷComponent͔ΒͰ΋ඇಉ ظϩʔυͰ͖Δํ͕خ͍͜͠ͱ΋ɻ
11. ϕετϓϥΫςΟε 2
 reduxϑϩʔ੍ޚ
12. reduxϑϩʔ੍ޚ • redux-effects-steps
 https://github.com/recruit-tech/redux-effects-steps • redux-thunk΍sagaɺObservableͱ͍͏खஈ͕͋Δ ͕ͦΕΒ͸࢖ͬͯͳ͍ɻ • ϑϩʔ੍ޚͰෳࡶͳॲཧΛॻ͚ΔΑ͏ʹͨ͘͠ͳ͍ • ෳࡶʹͳͬͯ͠·͏ͷͰ͋Ε͹middlewareʹಀ͕͢
13. reduxϑϩʔ੍ޚ • redux-effects-steps
 https://github.com/recruit-tech/redux-effects-steps • import { createAction } from 'redux-actions'; import { steps } from 'redux-effects-steps'; import { fetchrRead } from 'redux-effects-fetchr'; const fetchUserRequest = createAction('FETCH_USER_REQUEST'); const fetchUserSuccess = createAction('FETCH_USER_SUCCESS'); const fetchUserFail = createAction('FETCH_USER_FAIL'); function fetchUser({ user }) { return steps(
 // ϦΫΤετͨ͠ΒϦΫΤετͨ͜͠ͱΛActionͰൃՐ͓ͤͯ͘͞ɻ fetchUserRequest(), // ຊϦΫΤετ fetch ॲཧ fetchrRead('users', { user }),
 // ੒ޭͨ͠ΒSuccess Action, ࣦഊͨ͠Β Failure Action [fetchUserSuccess, fetchUserFail] ); }
14. reduxϑϩʔ੍ޚ • ଞͷOSSࣄྫ • redux-thunk • redux-saga • redux-observable
15. reduxϑϩʔ੍ޚ • redux-thunk͸ԿͰ΋Ͱ͖͗͢ΔɺActionΛॻ͘ॴͰࡉ͔͍ॲ ཧ͕ॻ͚Δͷ͸΍Γա͗ײ͋Δɻ͕ͦ͜Ԛ͘ͳΓͦ͏ɻ • redux-saga͸sagaͱ͍͏ϨΠϠͰόοΫάϥ΢ϯυϓϩηε తʹԿͰ΋΍Δɻ͜͜·Ͱͷॲཧ͕ඞཁʹͳͬͨέʔε͕গͳ ͍ɺΑ͋͘Δͷ͸ϦΫΤετΛൃՐͯͦ͠Ε͕੒ޭ͔ࣦͨ͠ഊ ͔ͨ͠ఔ౓ɺͦΕ͚ͩͰsaga͸ΦʔόʔΩϧײ • observable͸RxJSͰྲྀΕΛ੍ޚ͢Δͱ͍͏΋ͷ͕ͩɺͦ͜· Ͱͷྲྀྔ੍ݶ͕ඞཁʹͳͬͨ͜ͱ͕ͳ͍
16. ϕετϓϥΫςΟε 3
 ducks
17. ducks • https://github.com/erikras/ducks-modular- redux • reducer, actions, action creatorͱ͍͏ػೳͰ ෼͚ΔͷͰ͸ͳ͘ɺUserɺArticleͱ͍ͬͨΑ ͏ͳϦιʔεͷѻ͍Ͱ̍ͭͷϑΝΠϧʹ͢Δ
18. ducks • https://github.com/erikras/ducks-modular- redux /* @flow */ /** * Initial State */ const SALON = "redux-proto/salon"; export const [ FIND_SALON_BY_ID_REQUEST, FIND_SALON_BY_ID_SUCCESS, FIND_SALON_BY_ID_FAIL ] = createAsyncActionTypes(`${SALON}/find_id`); /** * Action creators */ const findSalonByIdRequest = createAction(FIND_SALON_BY_ID_REQUEST); const findSalonByIdSuccess = createAction(FIND_SALON_BY_ID_SUCCESS); const findSalonByIdFail = createAction(FIND_SALON_BY_ID_FAIL);
19. ducks • https://github.com/erikras/ducks-modular- redux /* @flow */ /** * Reducer */ export default (handleActions( { [FIND_SALON_BY_ID_REQUEST]: state => ({ … }), } )) /** * Selector */ export default (createSelector((state) => {…}, (items) => {…}))
20. ducks • actions, action creator, reducer ͚ͩͰ͸ͳ͘ɺselector· Ͱதʹ࣋ͭɻ • ϑΝΠϧ͕େ͖͘ͳΓͦ͏ͳ࣌͸ϑΥϧμʹͯ͠ϑΝΠϧ ෼ׂ͢Δͷ΋༗Γɻ͜ͷล͸޷͖ʹ • re-ducksͱ͍͏΋ͷ΋͋Δ͕ɺ͜ΕͱͷϋΠϒϦουײɻ • ཁ͸΍Γ͍ͨͷ͸Ϧιʔε࣠Ͱ·ͱΊΔํ͕ػೳ࣠Ͱ·ͱ ΊΔΑΓ΋ॻ͖΍͘͢ɺݟ΍͔ͬͨ͢ɻ
21. ϕετϓϥΫςΟε 4
 APIఆٛ
22. APIఆٛ • agreed https://github.com/recruit-tech/ agreed • Consumer Driven ContractΛ࣮ફ • ϑϩϯτΤϯυ͕த৺ʹͳͬͯ։ൃΛ͢͢Ί Δ࢓૊Έʹͳ͍ͬͯΔɻ
23. APIఆٛ • agreedͰAPIͷmockΛઌʹ࡞੒ • mockΛ࡞ΓऴΘͬͨΒAPI࡞੒ऀ(Server Side)ʹagreed-uiͰཁٻΛڞ༗ɻ • API͕ߏஙͰ͖͖ͯͨΒagreed-clientͰςετ έʔεͱ࣮ͯ͠ߦ͞ΕΔɻ
24. APIఆٛ
25. APIఆٛ • ଞOSSࣄྫ • Swagger • Pact
26. APIఆٛ • Swagger͸APIͷ࢓༷ఆٛͰ͋ͬͯAPIͷཁٻ Ͱ͸ͳ͍ɻ͋͘·ͰυΩϡϝϯτɺmock΋࡞ ΕΔ͕࡞Γ΍͘͢͸ͳͦ͞͏ɻ • Pact͸clientͷςετσʔλ͔Βserverͷ νΣοΫΛ͢ΔͨΊͷσʔλΛࣗಈੜ੒͢Δ ࢓૊Έɻςετσʔλ͕ඞཁͳͷ͸ਏ͍ɻɻ
27. ϕετϓϥΫςΟε UIฤ
28. ϕετϓϥΫςΟε ϑΥʔϜ
29. ϑΥʔϜฤ • 2017೥ͷformʹ͍ͭͯ • https://speakerdeck.com/yosuke_furukawa/ 2017nian-falseformfalsehua
30. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
    ͷϝϞϦ
31. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
    ͷϝϞϦ 6ODPOUSPMMFE
    'PSN $POUSPMMFE
    'PSN
32. Uncontrolled vs Controlled • DOMͷ஋Λ௚઀࢖͏ (Uncontrolled) • DOM͔Βऔ͖ͬͯͨ஋ΛJSͷϝϞϦʹೖΕ ͯɺεφοϓγϣοτͱͯ͠࢖͏ (Controlled)
33. Uncontrolled form // React ͩͱ͜͏ class NameForm extends React.Component { // … handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
34. Controlled form class NameForm extends React.Component { // … handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleCha </label> <input type="submit" value="Submit" /> </form> ); } }
35. Uncontrolled vs Controlled • Controlled ͳํ͸ ͜͜Ͱ͸ React ͷ state ͱ ͯ͠؅ཧ͢Δ • Uncontrolled ͳํ͸DOMʹ͚ͩ؅ཧͤ͞Δ
36. Uncontrolled vs Controlled • Facebook ͕ਪ঑ͯ͠Δͷ͸ Controlled Ұ୒ • React ͷ v-dom ߋ৽ͷλΠϛϯάͱ΋߹Θͤͯ React ͕࠷దԽͨ͠ํ๏ͰDOMʹ൓өͤ͞Δ͜ͱ ͕Ͱ͖Δ • ͪΐͬͱڽͬͨformΛ࡞Ε͹େମControlledͰ࣮ ૷͢Δඞཁ͕ग़ͯ͘Δɻ
37. Uncontrolled vs Controlled • jQuery UI Έ͍ͨͳϥΠϒϥϦ͸େମ Uncontrolled ͳํ๏Ͱ΍ͬͯΔ͜ͱ͕ଟ͍ʢؾ ͕͢Δʣ • طଘͷࢿ࢈͕jQueryʹ͋ͬͯͦΕ͕ Uncontrolled ͳํ๏Ͱ࣮ݱ͞ΕͯΔͳΒ࢖͏ͷ ΋ྑ͍͕ɺجຊ͸ Controlled Ͱྑ͍ؾ͕͢Δɻɹ
38. Uncontrolled vs Controlled • https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
39. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
    ͷϝϞϦ 6ODPOUSPMMFE
    'PSN
    ΋͏๨Εͯ΋ྑ͍͔΋ $POUSPMMFE
    'PSN
    ͓ͬͪ͜͢͢Ί
40. Ͱ΋ 2017 ೥ݱࡏ͸ state ͕ ෳ਺͋Δ
41. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%#
42. Ͳ͜ʹ஋Λอଘ͢Δͷ͕ਖ਼͠ ͍ͷ͔ʁ
44. 6TF
    3FBDU
    GPS
    FQIFNFSBM
    TUBUF
    UIBU
    EPFTO`U
    NBUUFS
    UP
    UIF
    BQQ
    HMPCBMMZ
    
45. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# &QIFNFSBM &UFSOBM 'PSFWFS
46. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# Ұ࣌తͳGPSNͷ஋ ͳΒ͜͜ʹ HMPCBMͳTUBUFͳΒ ͜͜ʹ
47. Ͱ΋΍ͬͯΈΔͱ
48. React ͷ state ͱ Redux ͷ state Ͱ form ͔ͩΒͱ͍ͬͯ ෼͚Δͷ໘౗
49. ࠓ͸
50. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# ͳΜ͔ύϑΥʔϚϯεͷϘ τϧωοΫ͕͋ͬͨΒ͜͜ جຊ͜͜
51. twitter Lite ͷߏ੒
52. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# UXJUUFS
    ͷ
    GPSN
    ͷ৘ใ͸ Ұ୴͜͜ͰCV⒎FS ਺จࣈهड़ͨ͠Β
    SFEVDFSʹߦ͘
53. ͋Δఔ౓ form ͷ৘ใ͸ React ͰͨΊͯɺ਺จࣈೖΕ ͨΒ Redux ʹ flush ͤ͞Δɻ
54. ϕετϓϥΫςΟε Ծ૝εΫϩʔϧ
55. Ծ૝εΫϩʔϧ • େલఏ: • DOMͷཁૉ͕૿͑Ε͹૿͑Δ΄Ͳϖʔδ͸ ॏ͘ͳΔ͠ɺΧΫͭ͘ • ϒϥ΢β্ͷϝϞϦ͕େ͖͘ͳΔ • ݟ͑ͯͳ͍ॴ͸DOMʹදࣔ͠ͳ͍͍ͯ͘
56. Ծ૝εΫϩʔϧ • ݟ͑ͯΔͱ͜Ζ͚ͩDOMͱͯ͠දࣔ͢Δ • react-virtualized Λ࢖͏ %0.ͱͯ͠ දࣔ %0.͔Β ͸ഁغ
57. ϕετϓϥΫςΟε ແݶεΫϩʔϧ
58. ແݶεΫϩʔϧ • େલఏ: • Ϣʔβʔͷճ༡࣌ؒΛ૿΍͍ͨ͠ɻ
 ݕࡧͨ͠Β2ϖʔδ໨Ҏ߱΋ͪΌΜͱݟ͍ͤͨɻ • ͪ·ͪ·࣍΁ͱ͔ϖʔδͷϦϯΫΛԡ͞ͳ͖Ό͍͚ͳ͍ͷ͸໘ ౗ʢಛʹϞόΠϧʣ • ͔ͱݴͬͯSEO͸ઈରʢεΫϩʔϧ͢Δͷ͸Ϣʔβʔ͚ͩͰ Google Crawler͸εΫϩʔϧΠϕϯτ·ͰൃՐͯ͘͠Εͳ͍ʣ
59. ແݶεΫϩʔϧ • ແݶεΫϩʔϧ x ϖʔδωʔγϣϯ • Ϣʔβʔ΋Ϋϩʔϥʔ΋
 ྆ํϑϨϯυϦʔʹɻ ໭Δ 1 2 3 4 5 6 7 8 9 10 ࣍΁
60. όουϊ΢ϋ΢ ΍ͬͯΈ͚ͨͲμϝͩͬͨฤ
61. ϋϚΓ·ͬͨ͘ babel plugins
62. babel-plugin-transform-react- inline-elementsͰIEͷࢮ
63. transform-react-constant- elementsͰbabelόάΛ౿Ή
64. transform-react-constant- elementsͰbabelόάΛ౿Ή • ൵C
65. Α͘Α͘ߟ͑Δͱͨ͘͞Μ͋Δ • fetchrͷෆ۩߹Λ౿Μͩ
 ʢओʹηΩϡϦςΟ໘ʣ • React v15ͰϝϞϦʔϦʔΫʹ೰·͞ΕΔɺv16Ͱղফ • react-router v4ະରԠ • etc…
66. Α͘Α͘ߟ͑Δͱͨ͘͞Μ͋Δ • fetchrͷෆ۩߹Λ౿Μͩ
 ʢओʹηΩϡϦςΟ໘ʣ • React v15ͰϝϞϦʔϦʔΫʹ೰·͞ΕΔɺv16Ͱղফ • react-router v4ະରԠ • etc… ܾͯ͠ॱ෩Ͱ͸ͳ͍͕ɺԶΒ͸΍ͬ ͍ͯͧ͘ʂʂʂʂ
67. ·ͱΊ • ϕετϓϥΫςΟεʢΞʔΩςΫνϟฤʣ • ඇಉظϩʔυ • reduxϑϩʔ੍ޚ • ducks • APIఆٛ • ϕετϓϥΫςΟε(UIฤ) • ϑΥʔϜ • Ծ૝εΫϩʔϧ • ແݶεΫϩʔϧ • όουϓϥΫςΟε • babel plugin…, onlyUpdateForPropTypes…, etc