Introduction to Redux - Speaker Deck

Introduction to Redux

by Kohei Asai

Slide 1

Slide 1 text

*OUSPEVDUJPOUP 3FEVY !BYSPTT 3FBDUKTNFFUVQPO4FQ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

3FEVY

Slide 5

Slide 5 text

8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

)PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

.PUJWBUJPO

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

%BUB'MPX

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF EJTQBUDI XJUI"DUJPO UZQFװ⦼׾ろ׬0CKFDU׾鵤ׅ &WFOU

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 3FEVDFSכ"DUJPOךUZQFזו ח״׏גؿ؍ٕة &WFOU

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 刿倜ָ⠗䵤ծ歗꬗׮刿倜 &WFOU

Slide 40

Slide 40 text

.JEEMFXBSFT

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

6TJOHJO UIF3FBM8PSME

Slide 52

Slide 52 text

XJUI3FBD

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

XJUI3FBDU3PVUFS

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

$PODMVTJPO

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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