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
22k
34
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
More Decks by Kohei Asai
See All by Kohei Asai
The State Transparented Web Application
axross
1
340
UIコンポーネント指向と「協働」
axross
6
2.9k
安全なJavaScriptを書く
axross
22
8.6k
作るのにデザイナーもエンジニアもない
axross
14
7.3k
なぜprottか
axross
4
2.7k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
460
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1.1k
Other Decks in Programming
See All in Programming
PHPプロジェクトの結合バランスを可視化する #php_night
kajitack
0
180
30年振りにコンパイラの定数整数除算を改善した
herumi
9
4.4k
高専キャリア LT 発表内容
crysta1221
6
5.4k
仕様駆動開発の消費期限
watany
20
9.2k
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
nogu66
0
120
AI駆動開発にグラフDBを重ねてみた
satoshi256kbyte
2
500
バグを直したら useEffect が消えた
colorful12
3
780
typoなんかねぇよ
raspython3
0
640
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
4
2.4k
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
200
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
pkshadeck
PRO
0
270
ソフトウェアラスタライザ
fadis
1
760
Featured
See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
680
The World Runs on Bad Software
bkeepers
PRO
72
12k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
300
Large-scale JavaScript Application Architecture
addyosmani
515
110k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.9k
Raft: Consensus for Rubyists
vanstee
141
7.7k
Discover your Explorer Soul
emna__ayadi
2
1.3k
Scaling GitHub
holman
464
140k
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