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. 'BNJMZPG'MVY 3FVY  TUBST 'MVNPY  TUBST 'MVYYPS  TUBST

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

    3Y'MVY TUBST 3FEVY  TUBST 3FEVY׮'MVYך⟗꟦ $PVOUFEPO4FQ
  3. %BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

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

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

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

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

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

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

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

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

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

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 刿倜ָ⠗䵤ծ歗꬗׮刿倜 &WFOU
  17. 8IFSFBSF.JEEMFXBSFT 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS

    4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO &WFOU .JEEMF XBSFT 3FEVDFSך⵸ד何ׂ׿ׅ׷
  18. -PHHJOHFBDINFTTBHF export const loggingMessage = store => { return next

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

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