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. 4.
  2. 7.

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

    3Y'MVY TUBST 3FEVY  TUBST $PVOUFEPO4FQ
  3. 8.

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

    3Y'MVY TUBST 3FEVY  TUBST 3FEVY׮'MVYך⟗꟦ $PVOUFEPO4FQ
  4. 17.
  5. 25.

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO UZQFװ⦼׾ろ׬0CKFDU׾鵤ׅ &WFOU
  6. 26.

    export const addTodo = body => { return { type:

    'TODO_ADD', todo: new Todo(body), }; }; -JLFUIJT
  7. 27.

    export const addTodo = body => { return { type:

    'TODO_ADD', todo: new Todo(body), }; }; -JLFUIJT UZQFה⦼׾鵤ׅ׌ֽך⽃秪זꟼ侧
  8. 29.

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 7JFXָEJTQBUDI &WFOU
  9. 30.

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

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

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 3FEVDFSכ"DUJPOךUZQFזו ח״׏גؿ؍ٕة &WFOU
  11. 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
  12. 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ծًحإ٦آ׾「ֽ《׷הㄎל׸׷ 䨱׶⦼ח״׏גչ刿倜䖓ך⦼պ׾寸׭׷ 䒷侧הずׄ⿫撑׾鵤ׅהչ㢌刿ז׃պ
  13. 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ךⴱ劍朐䡾
  14. 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׾ؿ؍ٕةؚٔٝ
  15. 36.

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF &WFOU
  16. 37.

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 䗳銲ח䘔ׄג4UBUF׾刿倜 &WFOU
  17. 38.

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 7JFXכ4UBUF׾飑铣ׅ׷ &WFOU
  18. 39.

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

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

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

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

    -PHHJOHFBDINFTTBHF export const loggingMessage = store => { return next

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

    export const loggingMessage = store => { return next =>

    { return action => { console.group(action.type); console.info(action); next(action); console.groupEnd(action.type); }; }; }; -PHHJOHFBDINFTTBHF 劤䔲כ׮ֲ׍׳׏ה知患ח剅ֽ׷ֽו˘ 崧׸גֹ׋ًحإ٦آ׾׉ךתתDPOTPMFח
  22. 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ח崧׸׷
  23. 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 }); }); }; }; };
  24. 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ָזֽ׸לإٔ٦
  25. 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׾鍑寸ׅ׷
  26. 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׾ ず劍涸חⳢ椚ׅ׸ל״ְ
  27. 52.
  28. 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
  29. 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 ד䖤׵׸׷
  30. 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ךٕ٦زָ ؝٦ٕغحؙד䖤׵׸׷
  31. 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׾ 䨱׶⦼ד䭷㹀ׅ׷
  32. 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穗歋ד䖤׵׸׷
  33. 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 ׮䖤׵׸׷
  34. 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תד׃ַ⿫撑׃גְזְזךד ذأز׮嚂