Introduction to Redux

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.

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU

25.

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.

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU

29.

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

30.

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

31.

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.

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

34.

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

35.

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

36.

4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF &WFOU

37.

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

38.

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

39.

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.

=> { 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.

=> { 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.

=> { 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.

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

57.

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

58.

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

59.

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

60.

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

61.

*/); }, 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

Introduction to Redux

Introduction to Redux

Want more?

Transcript