I talked about Redux(https://github.com/rackt/redux) on React.js meetup #2, 8 Sep 2015.
*OUSPEVDUJPOUP3FEVY!BYSPTT3FBDUKTNFFUVQPO4FQ
View Slide
)FMMP˖ !BYSPTT,PIFJ"TBJ˖ 8PSLJOHJO(VOPTZ*OD˖ KBWBTDSJQU OPEFKT SFBDUKT
˖ ؚظء٦ⰻד恟歗ָ铣؝ٝذٝخ˖ չ厤㼰䎃ך✲⟝砢պ˖ չ厤ؕٝة٦ؽٖպ˖ OQNJ4SFBDUSFEVYSFBDUSPVUFSCFNNFS˖ ״׃ֶֻ격ְ׃תׅ*EFWFMPQJOH
3FEVY
8IBUJT3FEVYIUUQTXXXOQNKTDPNQBDLBHFSFEVY
8IBUJT3FEVYIUUQTXXXOQNKTDPNQBDLBHFSFEVY+BWB4DSJQU،فٔ؛٦ءّٝךך✮庠〳腉ז朐䡾؝ٝذش
'BNJMZPG'MVY3FVY TUBST'MVNPY TUBST'MVYYPS TUBST3Y'MVYTUBST3FEVY TUBST$PVOUFEPO4FQ
'BNJMZPG'MVY3FVY TUBST'MVNPY TUBST'MVYYPS TUBST3Y'MVYTUBST3FEVY TUBST3FEVY'MVYך⟗$PVOUFEPO4FQ
)PXEJEZPVLOPX3FEVYIUUQTHJUIVCDPNBDEMJUFVNNPY
)PXEJEZPVLOPX3FEVYIUUQTHJUIVCDPNBDEMJUFVNNPYWכ剑䖓ךًآٍ٦ٔٔ٦أחזֲկ➿ח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
4JOHMF4UBUF5SFF4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUF
4JOHMF4UBUF5SFF4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUF3FEVYכאך4UBUFךٕ٦ز 呎ָ֮
4JOHMF4UBUF5SFF4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFخٔ٦朐ח4UBUFָעָׁג
4JOHMF4UBUF5SFF4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFך4UBUFחכ3FEVDFSָ秡➰ְג
˖ 4UBUFؿ؍ٕة٦وحػ٦˖ 3FEVDFSכ˖ 荈ⴓך4UBUF㢌刿ַׅוֲַ˖ 4UBUFוֲ刿倜ַׅծ䬐ֲ˖ 3FEVDFS荈⡤כ4UBUFדכזְ3FEVDFS
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUF
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPOUZQFװ⦼ろ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),};};-JLFUIJTUZQFה⦼鵤ֽׅך⽃秪זꟼ侧
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHF7JFXָEJTQBUDI&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHFׅץגך3FEVDFSָ「ֽ《&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHF3FEVDFSכ"DUJPOךUZQFזוח״גؿ؍ٕة&WFOU
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
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;}};-JLFUIJT3FEVDFSծًحإ٦آ「ֽ《הㄎל䨱⦼ח״גչ刿倜䖓ך⦼պ寸䒷侧הずׄ撑鵤ׅהչ㢌刿ז׃պ
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;}};-JLFUIJT4UBUFךⴱ劍朐䡾
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ؿ؍ٕةؚٔٝ
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHF&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHF䗳銲ח䘔ׄג4UBUF刿倜&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHFQSPQBHBUJPO7JFXכ4UBUF飑铣ׅ&WFOU
%BUB'MPX7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHFQSPQBHBUJPO刿倜ָ⠗䵤ծ歗刿倜&WFOU
.JEEMFXBSFT
.JEEMFXBSFT˖ ًحإ٦آ⠗䵤鷿⚥ד何ׂׅ堣腉˖ 醱侧涫ꐮ〳˖ ؎ً٦آכ/PEFKTך$POOFDUךח鵚ְ
8IFSFBSF.JEEMFXBSFT7JFX$PNQPOFOU"DUJPO4UBUF3FEVDFS4UBUF3FEVDFS4UBUF3FEVDFS4JOHMF4UBUFEJTQBUDIXJUI"DUJPO NFTTBHFQSPQBHBUJPO&WFOU.JEEMFXBSFT3FEVDFSךד何ׂׅ
&YBNQMFTPG.JEEMFXBSFT˖ הִלֿזֿהָדֹ˖ 崧גֻًحإ٦آؘؚٗٝ˖ SFEVYEFWUPPMTהַ˖ "DUJPOװ3FEVDFSַ$BMMCBDL䱖ꤐׅ˖ (PPHMF"OBMZUJDTח&WFOU鸐濼ׅFUD
-PHHJOHFBDINFTTBHFexport 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ח崧
"TZODDPOWFSUUPMJLFB4ZODexport 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 });});};};};
"TZODDPOWFSUUPMJLFB4ZODexport 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ָזֽלإٔ٦
"TZODDPOWFSUUPMJLFB4ZODexport 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鍑寸ׅ
"TZODDPOWFSUUPMJLFB4ZODexport 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ず劍涸חⳢ椚ׅל״ְ
6TJOHJOUIF3FBM8PSME
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
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 };});-JLFUIJTDPOOFDU כJNQPSU\DPOOFDU^GSPNSFBDUSFEVYד䖤
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 };});-JLFUIJT4JOHMF4UBUF5SFFךٕ٦زָ؝٦ٕغحؙד䖤
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䨱⦼ד䭷㹀ׅ
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 };});-JLFUIJT4UBUFכUIJTQSPQT穗歋ד䖤
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 };});-JLFUIJTDPOOFDU ׅה荈⹛涸חEJTQBUDI 䖤
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תד׃ַ撑׃גְזְזךדذأز嚂
XJUI3FBDU3PVUFS
XJUI3FBDU3PVUFS˖ ⢘欽חכSFBDUSPVUFS!CFUB⟃꣬˖ 3PVUFS$PNQPOFOUָ妜׃ְ˖ 鑫׃ֻ鑧ׅהꞿֻז♳ח؝،ז鑧זךדծ䗳銲ז䥪鋵⠓ד耀ְגְֻׁ˖ תכ[email protected]תד
$PODMVTJPO
$PODMVTJPO˖ 植朐ծ䧮ղךה㣐ֹז䝢כ朐䡾盖椚˖ 醱꧟ׁכ♳傻⫘ぢח֮˖ 3FBDU'MVYד鍑寸ׁגכְזְ˖ 朐䡾盖椚חאְגぢֹさֲֶ˖ 3FEVYכչ朐䡾盖椚պחꅾֹ縧ְ'MVY
$PODMVTJPO˖ 4JOHMF4UBUF5SFF˖ אך朐䡾خٔ٦ד،فٔ؛٦ءّٝⰋ⡤˖ ٌحؙ岣Ⰵ׃ծ⽯䏟חⱄ植ָ〳腉
$PODMVTJPO˖ %BUB'MPX˖ "DUJPOכ劤䔲חչךꟼ侧պ˖ 3FEVDFS⽃秪זؿ؍ٕة٦وحػ٦˖ וֿד⦼ָ欰䧭ׁծוך״ֲח崧גְךַծ㺁僒ח鴬ֿהָדֹ
$PODMVTJPO˖ .JEEMFXBSFTָ֮˖ ׅץגךًحإ٦آך何ָׂ〳腉˖ ؘؚٗٝ˖ ꬊず劍ず劍Ⳣ椚שֻ䪔ֲ˖ 钠鏾ָ幥דַוֲַך然钠זו
3FEVYJTSFBMMZHSFBU
5IBOLZPVGPSMJTUFOJOH
8FXBOU'SPOUFOE&OHJOFFST
axross
yucamm124
ivargrimstad
hirotokirimaru
xblood
ffjlabo
masuda220
sagawa23
77web
track3jyo
honma12345
pyama86
tenderlove
akmur
lara
schacon
mclloyd
lynnandtonic
bkeepers
hannesfritz
csswizardry
yeseniaperezcruz
eileencodes
morganepeng