Introduction to Redux

B6fc93012ec9387a73b093ef462545bb?s=47 Kohei Asai
September 08, 2015

Introduction to Redux

I talked about Redux(https://github.com/rackt/redux) on React.js meetup #2, 8 Sep 2015.

B6fc93012ec9387a73b093ef462545bb?s=128

Kohei Asai

September 08, 2015
Tweet

Transcript

  1. *OUSPEVDUJPOUP 3FEVY !BYSPTT 3FBDUKTNFFUVQPO4FQ

  2. )FMMP ˖ !BYSPTT,PIFJ"TBJ ˖ 8PSLJOHJO(VOPTZ*OD ˖ KBWBTDSJQU OPEFKT SFBDUKT

  3. ˖ ؚظء٦ⰻד恟歗ָ铣׭׷؝ٝذٝخ ˖ չ厤㼰䎃ך✲⟝砢պ ˖ չ厤ؕٝة٦ؽٖպ ˖ OQNJ4SFBDUSFEVYSFBDUSPVUFSCFNNFS ˖ ״׹׃ֶֻ격ְ׃תׅ

    *EFWFMPQJOH
  4. 3FEVY

  5. 8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY

  6. 8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY +BWB4DSJQU،فٔ؛٦ءّٝך׋׭ך ✮庠〳腉ז朐䡾؝ٝذش

  7. 'BNJMZPG'MVY 3FVY  TUBST 'MVNPY  TUBST 'MVYYPS  TUBST

    3Y'MVY TUBST 3FEVY  TUBST $PVOUFEPO4FQ
  8. 'BNJMZPG'MVY 3FVY  TUBST 'MVNPY  TUBST 'MVYYPS  TUBST

    3Y'MVY TUBST 3FEVY  TUBST 3FEVY׮'MVYך⟗꟦ $PVOUFEPO4FQ
  9. )PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY

  10. )PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY Wכ剑䖓ךًآٍ٦ٔٔ٦أח ז׷׌׹ֲկ ➿׻׶ח3FEVY׾⢪׏גֻ׸կ ֮׸כوآדؚٖ٦ز׌կ

  11. 3FEVYJT ˖ 'MVNNPYך⡲罏ָ䩛佝׃ד颣额 ˖ ְתװ3FEVYךワ鴟⡲׏׋׶׃ג׷ ˖ ر٦ةؿٗ٦כ'MVNNPYח⡂ג׷ ˖ 'MVNNPYדכ؟ه٦ز׃גְזַ׏׋ծ չ朐䡾ך盖椚պחꅾֹ׾縧ְגְ׷

  12. .PUJWBUJPO

  13. 41"HFUNPSF4UBUFT ˖ +BWB4DSJQUך41"׾⡲׷ךָ䔲׋׶⵸חז׶ծ Ⳕ׏׋אֻ׶׾実׭׵׸׷ֿהָ㢳ֻז׏׋ ˖ ״׶㢳ֻך朐䡾ך盖椚ָ䗳銲חז׷

  14. UPP)BSEUPNBOBHJOHTUBUFT ˖ 窫ִ׆㢌⻉ׅ׷朐䡾׾盖椚ׅ׷ךכꨇ׃ְ ˖ ְ׆׸䩛ח頾ִזֻז׷ ˖ غؚךⱄ植ָּׅחדֹזֻז׷ ˖ 堣腉鷄⸇ךꥷח䕦갟眔㔲ָ钠陎׃חְֻ

  15. 3FBJTHSFBU CVU ˖ 3FBDUד%0.ה朐䡾כⴖ׶ꨄׁ׸׋ ˖ $PNQPOFOUכ⦼ח״׏ג⿫撑鷲麓ח %0.׾乼⡲ׅ׷ ˖ ׃ַ׃ծ׉ך朐䡾ךչ盖椚պכ䩛➰ַ׆

  16. 8FBSFTUJMMPOPOFTXBZ'MVY ˖ չ朐䡾ך盖椚պ׾'MVYהְֲؿٗ٦ח䔲גכ׭ גծ⬁׵כ鍑寸׃״ֲה׃׋ ˖ ׃ַ׃ծת׌չֿ׸׌պהְֲ׮ךכ⳿גֹג ְזַ׏׋ ˖ 3FEVYכֿךչ朐䡾ך盖椚պ׾♧殢ֲתֻדֹ ׷'MVY

  17. %BUB'MPX

  18. 4JOHMF4UBUF5SFF 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF

  19. 4JOHMF4UBUF5SFF 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF 3FEVYכאך4UBUFךٕ٦ز 呎

    ָ֮׷
  20. 4JOHMF4UBUF5SFF 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF خٔ٦朐ח4UBUFָע׵ָׁ׏ג׷

  21. 4JOHMF4UBUF5SFF 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF ׉׸׊׸ך4UBUFחכ 3FEVDFSָ秡➰ְג׷

  22. ˖ 4UBUFؿ؍ٕة٦وحػ٦ ˖ 3FEVDFSכ ˖ 荈ⴓך4UBUF׾㢌刿ׅ׷ַוֲַ ˖ 4UBUF׾וֲ刿倜ׅ׷ַծ׾䬐ֲ ˖ 3FEVDFS荈⡤כ4UBUFדכזְ

    3FEVDFS
  23. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF
  24. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU
  25. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO UZQFװ⦼׾ろ׬0CKFDU׾鵤ׅ &WFOU
  26. export const addTodo = body => { return { type:

    'TODO_ADD', todo: new Todo(body), }; }; -JLFUIJT
  27. export const addTodo = body => { return { type:

    'TODO_ADD', todo: new Todo(body), }; }; -JLFUIJT UZQFה⦼׾鵤ׅ׌ֽך⽃秪זꟼ侧
  28. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU
  29. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 7JFXָEJTQBUDI &WFOU
  30. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF ׅץגך3FEVDFSָ「ֽ《׷ &WFOU
  31. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 3FEVDFSכ"DUJPOךUZQFזו ח״׏גؿ؍ٕة &WFOU
  32. const initialState = { items: [] }; export const todo

    = (state = initialState, action) { switch (action.type) { case 'TODO_ADD': return { items: state.items.concat(action.todo), }; default: return state; } }; -JLFUIJT
  33. const initialState = { items: [] }; export const todo

    = (state = initialState, action) { switch (action.type) { case 'TODO_ADD': return { items: state.items.concat(action.todo), }; default: return state; } }; -JLFUIJT 3FEVDFSծًحإ٦آ׾「ֽ《׷הㄎל׸׷ 䨱׶⦼ח״׏גչ刿倜䖓ך⦼պ׾寸׭׷ 䒷侧הずׄ⿫撑׾鵤ׅהչ㢌刿ז׃պ
  34. const initialState = { items: [] }; export const todo

    = (state = initialState, action) { switch (action.type) { case 'TODO_ADD': return { items: state.items.concat(action.todo), }; default: return state; } }; -JLFUIJT 4UBUFךⴱ劍朐䡾
  35. const initialState = { items: [] }; export const todo

    = (state = initialState, action) { switch (action.type) { case 'TODO_ADD': return { items: state.items.concat(action.todo), }; default: return state; } }; -JLFUIJT "DUJPO׾ؿ؍ٕةؚٔٝ
  36. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF &WFOU
  37. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 䗳銲ח䘔ׄג4UBUF׾刿倜 &WFOU
  38. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 7JFXכ4UBUF׾飑铣ׅ׷ &WFOU
  39. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 刿倜ָ⠗䵤ծ歗꬗׮刿倜 &WFOU
  40. .JEEMFXBSFT

  41. .JEEMFXBSFT ˖ ًحإ٦آ׾⠗䵤鷿⚥ד何ׂ׿ׅ׷堣腉 ˖ 醱侧涫ꐮ〳 ˖ ؎ً٦آכ/PEFKTך$POOFDUך׉׸ח鵚ְ

  42. 8IFSFBSF.JEEMFXBSFT 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO &WFOU .JEEMF XBSFT 3FEVDFSך⵸ד何ׂ׿ׅ׷
  43. &YBNQMFTPG.JEEMFXBSFT ˖ ׋הִלֿ׿זֿהָדֹ׷ ˖ 崧׸גֻ׷ًحإ٦آ׾ؘؚٗٝ ˖ SFEVYEFWUPPMTהַ ˖ "DUJPOװ3FEVDFSַ׵$BMMCBDL׾䱖ꤐׅ׷ ˖

    (PPHMF"OBMZUJDTח&WFOU鸐濼ׅ׷FUD
  44. -PHHJOHFBDINFTTBHF export const loggingMessage = store => { return next

    => { return action => { console.group(action.type); console.info(action); next(action); console.groupEnd(action.type); }; }; }; 劤䔲כ׮ֲ׍׳׏ה知患ח剅ֽ׷ֽו˘
  45. export const loggingMessage = store => { return next =>

    { return action => { console.group(action.type); console.info(action); next(action); console.groupEnd(action.type); }; }; }; -PHHJOHFBDINFTTBHF 劤䔲כ׮ֲ׍׳׏ה知患ח剅ֽ׷ֽו˘ 崧׸גֹ׋ًحإ٦آ׾׉ךתתDPOTPMFח
  46. export const loggingMessage = store => { return next =>

    { return action => { console.group(action.type); console.info(action); next(action); console.groupEnd(action.type); }; }; }; -PHHJOHFBDINFTTBHF 劤䔲כ׮ֲ׍׳׏ה知患ח剅ֽ׷ֽו˘ OFYU ׅ׷ה如ך.JEEMFXBSF ת׋כ3FEVDFSח崧׸׷
  47. "TZODDPOWFSUUPMJLFB4ZOD export const promiseSyncify = store => { return next

    => { return action => { if (!action.promise) return next(action); action.promise .then(value => next({ type: action.type, value })) .catch(err => { console.error(err); next({ type: action.type, value: null }); }); }; }; };
  48. "TZODDPOWFSUUPMJLFB4ZOD export const promiseSyncify = store => { return next

    => { return action => { if (!action.promise) return next(action); action.promise .then(value => next({ type: action.type, value })) .catch(err => { console.error(err); next({ type: action.type, value: null }); }); }; }; }; BDUJPOQSPNJTFָזֽ׸לإٔ٦
  49. "TZODDPOWFSUUPMJLFB4ZOD export const promiseSyncify = store => { return next

    => { return action => { if (!action.promise) return next(action); action.promise .then(value => next({ type: action.type, value })) .catch(err => { console.error(err); next({ type: action.type, value: null }); }); }; }; }; 1SPNJTF׾鍑寸ׅ׷
  50. "TZODDPOWFSUUPMJLFB4ZOD export const promiseSyncify = store => { return next

    => { return action => { if (!action.promise) return next(action); action.promise .then(value => next({ type: action.type, value })) .catch(err => { console.error(err); next({ type: action.type, value: null }); }); }; }; }; OFYU׃ג⦼׾崧ׅ ぐ3FEVDFSכ崧׸גֻ׷WBMVF׾ ず劍涸חⳢ椚ׅ׸ל״ְ
  51. 6TJOHJO UIF3FBM8PSME

  52. XJUI3FBD

  53. XJUI ˖ 3FEVY荈⡤כ3FBDUָזֻג׮⹛ֻ ˖ 3FEVYכ׋׌ך朐䡾؝ٝذشחֺׅזְ ˖ ˑOHSFEVYהַ׮֮׷ ˖ 3FBDUהך⢘欽חכSFBDUSFEVYָ⤑ⵃ

  54. SFBDUSFEVY ˖ 3FBDUغ؎ٝر؍ؚٝ׾䲿⣘ׅ׷ ˖ DPOOFDU  ˖ UIJTQSPQT穗歋דծ䭷㹀׃׋4UBUFװ EJTQBUDI ָ䖤׵׸׷

    ˖ TVCTDSJCFך荈⹛⻉ ˖ $PNQPOFOUך'MVYꬊ⣛㶷⻉
  55. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT
  56. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT DPOOFDU כ JNQPSU\DPOOFDU^GSPNSFBDUSFEVY ד䖤׵׸׷
  57. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT 4JOHMF4UBUF5SFFךٕ٦زָ ؝٦ٕغحؙד䖤׵׸׷
  58. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT $PNQPOFOUד䗳銲ז4UBUF׾ 䨱׶⦼ד䭷㹀ׅ׷
  59. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT 4UBUFכUIJTQSPQT穗歋ד䖤׵׸׷
  60. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT DPOOFDU ׅ׷ה荈⹛涸חEJTQBUDI ׮䖤׵׸׷
  61. export const TodoList = React.createClass({ onAddClick() { this.props.dispatch(/* any action

    */); }, render() { // can access to this.props.todos }, }); export default connect(state => { return { todos: state.todos.items }; }); -JLFUIJT ⴓֽגFYQPSUׅ׸לծ⯋ך$PNQPOFOUכ QSPQTתד׃ַ⿫撑׃גְזְזךד ذأز׮嚂
  62. XJUI3FBDU3PVUFS

  63. XJUI3FBDU3PVUFS ˖ ⢘欽חכSFBDUSPVUFS!CFUB⟃꣬׾ ˖ 3PVUFS$PNQPOFOUָ妜׃ְ׋׭ ˖ 鑫׃ֻ鑧ׅהꞿֻז׷♳ח؝،ז鑧זךדծ 䗳銲ז׵䥪鋵⠓ד耀ְגֻ׌ְׁ ˖ ת׋כ!BYSPTT@PO5XJUUFSתד

  64. $PODMVTJPO

  65. $PODMVTJPO ˖ 植朐ծ䧮ղך׮׏ה׮㣐ֹז䝢׫כ朐䡾盖椚 ˖ 醱꧟ׁכ♳傻⫘ぢח֮׷ ˖ 3FBDU'MVYד鍑寸ׁ׸גכְזְ ˖ ׉׹׉׹朐䡾盖椚חאְגぢֹさֲֶ ˖

    3FEVYכչ朐䡾盖椚պחꅾֹ׾縧ְ׋'MVY
  66. $PODMVTJPO ˖ 4JOHMF4UBUF5SFF ˖ אך朐䡾خٔ٦ד،فٔ؛٦ءّٝⰋ⡤׾ ˖ ٌحؙ׾岣Ⰵ׃ծ⽯䏟חⱄ植ָ〳腉

  67. $PODMVTJPO ˖ %BUB'MPX ˖ "DUJPOכ劤䔲חչ׋׌ךꟼ侧պ ˖ 3FEVDFS׮⽃秪זؿ؍ٕة٦وحػ٦ ˖ וֿד⦼ָ欰䧭ׁ׸ծוך״ֲח崧׸ג ְ׏׋ךַծ㺁僒ח鴬׷ֿהָדֹ׷

  68. $PODMVTJPO ˖ .JEEMFXBSFTָ֮׷ ˖ ׅץגךًحإ٦آך何ׂ׿ָ〳腉 ˖ ؘؚٗٝ ˖ ꬊず劍׾ず劍Ⳣ椚׏שֻ䪔ֲ ˖

    钠鏾ָ幥׿ד׷ַוֲַך然钠זו׮
  69. 3FEVYJT SFBMMZHSFBU

  70. 5IBOLZPVGPS MJTUFOJOH

  71. 8FXBOU 'SPOUFOE &OHJOFFST