Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
350
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
990
Other Decks in Programming
See All in Programming
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
Realtime API 入門
riofujimon
0
110
Honoの来た道とこれから
yusukebe
19
3k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
CSC509 Lecture 09
javiergs
PRO
0
110
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Featured
See All Featured
KATA
mclloyd
29
13k
The Pragmatic Product Professional
lauravandoore
31
6.3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Being A Developer After 40
akosma
86
590k
A Philosophy of Restraint
colly
203
16k
BBQ
matthewcrist
85
9.3k
Producing Creativity
orderedlist
PRO
341
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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