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

Introduction to Redux

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.

Kohei Asai

September 08, 2015
Tweet

More Decks by Kohei Asai

Other Decks in Programming

Transcript

  1. *OUSPEVDUJPOUP
    3FEVY
    !BYSPTT
    3FBDUKTNFFUVQPO4FQ

    View Slide

  2. )FMMP

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

    View Slide

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

    View Slide

  4. 3FEVY

    View Slide

  5. 8IBUJT3FEVY
    IUUQTXXXOQNKTDPNQBDLBHFSFEVY

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. )PXEJEZPVLOPX3FEVY
    IUUQTHJUIVCDPNBDEMJUFVNNPY

    View Slide

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

    View Slide

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

    View Slide

  12. .PUJWBUJPO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. %BUB'MPX

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF

    View Slide

  24. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO
    &WFOU

    View Slide

  25. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO
    UZQFװ⦼׾ろ׬0CKFDU׾鵤ׅ
    &WFOU

    View Slide

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

    View Slide

  27. export const addTodo = body => {
    return {
    type: 'TODO_ADD',
    todo: new Todo(body),
    };
    };
    -JLFUIJT
    UZQFה⦼׾鵤ׅ׌ֽך⽃秪זꟼ侧

    View Slide

  28. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO
    &WFOU

    View Slide

  29. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    7JFXָEJTQBUDI
    &WFOU

    View Slide

  30. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    ׅץגך3FEVDFSָ「ֽ《׷
    &WFOU

    View Slide

  31. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    3FEVDFSכ"DUJPOךUZQFזו
    ח״׏גؿ؍ٕة
    &WFOU

    View Slide

  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

    View Slide

  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ծًحإ٦آ׾「ֽ《׷הㄎל׸׷
    䨱׶⦼ח״׏גչ刿倜䖓ך⦼պ׾寸׭׷
    䒷侧הずׄ⿫撑׾鵤ׅהչ㢌刿ז׃պ

    View Slide

  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ךⴱ劍朐䡾

    View Slide

  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׾ؿ؍ٕةؚٔٝ

    View Slide

  36. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    &WFOU

    View Slide

  37. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    䗳銲ח䘔ׄג4UBUF׾刿倜
    &WFOU

    View Slide

  38. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    QSPQBHBUJPO
    7JFXכ4UBUF׾飑铣ׅ׷
    &WFOU

    View Slide

  39. %BUB'MPX
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    QSPQBHBUJPO
    刿倜ָ⠗䵤ծ歗꬗׮刿倜
    &WFOU

    View Slide

  40. .JEEMFXBSFT

    View Slide

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

    View Slide

  42. 8IFSFBSF.JEEMFXBSFT
    7JFX
    $PNQPOFOU

    "DUJPO
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4UBUF
    3FEVDFS
    4JOHMF4UBUF
    EJTQBUDI
    XJUI"DUJPO NFTTBHF
    QSPQBHBUJPO
    &WFOU
    .JEEMF
    XBSFT
    3FEVDFSך⵸ד何ׂ׿ׅ׷

    View Slide

  43. &YBNQMFTPG.JEEMFXBSFT
    ˖ ׋הִלֿ׿זֿהָדֹ׷
    ˖ 崧׸גֻ׷ًحإ٦آ׾ؘؚٗٝ
    ˖ SFEVYEFWUPPMTהַ
    ˖ "DUJPOװ3FEVDFSַ׵$BMMCBDL׾䱖ꤐׅ׷
    ˖ (PPHMF"OBMZUJDTח&WFOU鸐濼ׅ׷FUD

    View Slide

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

    View Slide

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

    View Slide

  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ח崧׸׷

    View Slide

  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 });
    });
    };
    };
    };

    View Slide

  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ָזֽ׸לإٔ٦

    View Slide

  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׾鍑寸ׅ׷

    View Slide

  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׾
    ず劍涸חⳢ椚ׅ׸ל״ְ

    View Slide

  51. 6TJOHJO
    UIF3FBM8PSME

    View Slide

  52. XJUI3FBD

    View Slide

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

    View Slide

  54. SFBDUSFEVY
    ˖ 3FBDUغ؎ٝر؍ؚٝ׾䲿⣘ׅ׷
    ˖ DPOOFDU

    ˖ UIJTQSPQT穗歋דծ䭷㹀׃׋4UBUFװ
    EJTQBUDI
    ָ䖤׵׸׷
    ˖ TVCTDSJCFך荈⹛⻉
    ˖ $PNQPOFOUך'MVYꬊ⣛㶷⻉

    View Slide

  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

    View Slide

  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
    ד䖤׵׸׷

    View Slide

  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ךٕ٦زָ
    ؝٦ٕغحؙד䖤׵׸׷

    View Slide

  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׾
    䨱׶⦼ד䭷㹀ׅ׷

    View Slide

  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穗歋ד䖤׵׸׷

    View Slide

  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
    ׮䖤׵׸׷

    View Slide

  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תד׃ַ⿫撑׃גְזְזךד
    ذأز׮嚂

    View Slide

  62. XJUI3FBDU3PVUFS

    View Slide

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

    View Slide

  64. $PODMVTJPO

    View Slide

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

    View Slide

  66. $PODMVTJPO
    ˖ 4JOHMF4UBUF5SFF
    ˖ אך朐䡾خٔ٦ד،فٔ؛٦ءّٝⰋ⡤׾
    ˖ ٌحؙ׾岣Ⰵ׃ծ⽯䏟חⱄ植ָ〳腉

    View Slide

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

    View Slide

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

    View Slide

  69. 3FEVYJT
    SFBMMZHSFBU

    View Slide

  70. 5IBOLZPVGPS
    MJTUFOJOH

    View Slide

  71. 8FXBOU
    'SPOUFOE
    &OHJOFFST

    View Slide