$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Redux
Search
Kohei Asai
September 08, 2015
Programming
34
21k
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
Share
More Decks by Kohei Asai
See All by Kohei Asai
The State Transparented Web Application
axross
1
230
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.3k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.6k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
360
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
990
Other Decks in Programming
See All in Programming
Symfony Mapper Component
soyuka
2
380
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
170
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
590
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
150
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
650
カンファレンスでLTしました / kashiwarb5
nhayato
0
110
layerx_20241129.pdf
kyoheig3
2
250
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
0
420
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
130
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
380
14 Years of iOS: Lessons and Key Points
seyfoyun
1
520
型のインスタンス化は非常に深く、無限である可能性があります。
kimitashoichi
0
110
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Designing Experiences People Love
moore
138
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Scaling GitHub
holman
458
140k
Practical Orchestrator
shlominoach
186
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
77
Making the Leap to Tech Lead
cromwellryan
133
9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
The Pragmatic Product Professional
lauravandoore
32
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Code Review Best Practice
trishagee
64
17k
Designing for humans not robots
tammielis
250
25k
Transcript
*OUSPEVDUJPOUP 3FEVY !BYSPTT 3FBDUKTNFFUVQPO4FQ
)FMMP ˖ !BYSPTT,PIFJ"TBJ ˖ 8PSLJOHJO(VOPTZ*OD ˖ KBWBTDSJQU OPEFKT SFBDUKT
˖ ؚظء٦ⰻד恟歗ָ铣؝ٝذٝخ ˖ չ厤㼰䎃ך✲⟝砢պ ˖ չ厤ؕٝة٦ؽٖպ ˖ OQNJ4SFBDUSFEVYSFBDUSPVUFSCFNNFS ˖ ״׃ֶֻ격ְ׃תׅ
*EFWFMPQJOH
3FEVY
8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY
8IBUJT3FEVY IUUQTXXXOQNKTDPNQBDLBHFSFEVY +BWB4DSJQU،فٔ؛٦ءّٝךך ✮庠〳腉ז朐䡾؝ٝذش
'BNJMZPG'MVY 3FVY TUBST 'MVNPY TUBST 'MVYYPS TUBST
3Y'MVY TUBST 3FEVY TUBST $PVOUFEPO4FQ
'BNJMZPG'MVY 3FVY TUBST 'MVNPY TUBST 'MVYYPS TUBST
3Y'MVY TUBST 3FEVY TUBST 3FEVY'MVYך⟗ $PVOUFEPO4FQ
)PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY
)PXEJEZPVLOPX3FEVY IUUQTHJUIVCDPNBDEMJUFVNNPY 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
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
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ה⦼鵤ֽׅך⽃秪זꟼ侧
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 7JFXָEJTQBUDI &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF ׅץגך3FEVDFSָ「ֽ《 &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 3FEVDFSכ"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; } }; -JLFUIJT 3FEVDFSծًحإ٦آ「ֽ《הㄎל 䨱⦼ח״גչ刿倜䖓ך⦼պ寸 䒷侧הずׄ撑鵤ׅהչ㢌刿ז׃պ
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ךⴱ劍朐䡾
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'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF 䗳銲ח䘔ׄג4UBUF刿倜 &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
4JOHMF4UBUF EJTQBUDI XJUI"DUJPO NFTTBHF QSPQBHBUJPO 7JFXכ4UBUF飑铣ׅ &WFOU
%BUB'MPX 7JFX $PNQPOFOU "DUJPO 4UBUF 3FEVDFS 4UBUF 3FEVDFS 4UBUF 3FEVDFS
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 }); }); }; }; };
"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ָזֽלإٔ٦
"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鍑寸ׅ
"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 ず劍涸חⳢ椚ׅל״ְ
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
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 ד䖤
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ךٕ٦زָ ؝٦ٕغحؙד䖤
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 }; }); -JLFUIJT 4UBUFכ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 }; }); -JLFUIJT DPOOFDU ׅה荈⹛涸ח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ָ妜׃ְ ˖ 鑫׃ֻ鑧ׅהꞿֻז♳ח؝،ז鑧זךדծ 䗳銲ז䥪鋵⠓ד耀ְגְֻׁ ˖ תכ!BYSPTT@PO5XJUUFSתד
$PODMVTJPO
$PODMVTJPO ˖ 植朐ծ䧮ղךה㣐ֹז䝢כ朐䡾盖椚 ˖ 醱꧟ׁכ♳傻⫘ぢח֮ ˖ 3FBDU'MVYד鍑寸ׁגכְזְ ˖ 朐䡾盖椚חאְגぢֹさֲֶ ˖
3FEVYכչ朐䡾盖椚պחꅾֹ縧ְ'MVY
$PODMVTJPO ˖ 4JOHMF4UBUF5SFF ˖ אך朐䡾خٔ٦ד،فٔ؛٦ءّٝⰋ⡤ ˖ ٌحؙ岣Ⰵ׃ծ⽯䏟חⱄ植ָ〳腉
$PODMVTJPO ˖ %BUB'MPX ˖ "DUJPOכ劤䔲חչךꟼ侧պ ˖ 3FEVDFS⽃秪זؿ؍ٕة٦وحػ٦ ˖ וֿד⦼ָ欰䧭ׁծוך״ֲח崧ג ְךַծ㺁僒ח鴬ֿהָדֹ
$PODMVTJPO ˖ .JEEMFXBSFTָ֮ ˖ ׅץגךًحإ٦آך何ָׂ〳腉 ˖ ؘؚٗٝ ˖ ꬊず劍ず劍Ⳣ椚שֻ䪔ֲ ˖
钠鏾ָ幥דַוֲַך然钠זו
3FEVYJT SFBMMZHSFBU
5IBOLZPVGPS MJTUFOJOH
8FXBOU 'SPOUFOE &OHJOFFST