Introduction to Redux

*OUSPEVDUJPOUP 3FEVY !BYSPTT 3FBDUKTNFFUVQPO4FQ

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

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

8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY

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

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

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

)PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY

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

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

.PUJWBUJPO

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

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

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

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

%BUB'MPX

4JOHMF4UBUF5SFF 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF

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

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

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

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

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

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU

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

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

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

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU

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

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

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

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

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

= (state = initialState, action) { switch (action.type) { case 'TODO_ADD': return { items: state.items.concat(action.todo), }; default: return state; } }; -JLFUIJT "DUJPO׾ؿ؍ٕةؚٔٝ

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF &WFOU

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

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

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

.JEEMFXBSFT

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

8IFSFBSF.JEEMFXBSFT 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO &WFOU .JEEMF XBSFT 3FEVDFSך⵸ד何ׂ׿ׅ׷

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

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

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

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

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

=> { 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ָזֽ׸לإٔ٦

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

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

6TJOHJO UIF3FBM8PSME

XJUI3FBD

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

SFBDUSFEVY ˖ 3FBDUغ؎ٝر؍ؚٝ׾䲿⣘ׅ׷ ˖ DPOOFDU ˖ UIJTQSPQT穗歋דծ䭷㹀׃׋4UBUFװ EJTQBUDI ָ䖤׵׸׷
˖ TVCTDSJCFך荈⹛⻉ ˖ $PNQPOFOUך'MVYꬊ⣛㶷⻉

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

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

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

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

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

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

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

XJUI3FBDU3PVUFS

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

$PODMVTJPO

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

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

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

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

3FEVYJT SFBMMZHSFBU

5IBOLZPVGPS MJTUFOJOH

8FXBOU 'SPOUFOE &OHJOFFST

Introduction to Redux

Introduction to Redux

More Decks by Kohei Asai

Other Decks in Programming

Featured

Transcript