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
22k
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
260
UIコンポーネント指向と「協働」
axross
6
2.8k
安全なJavaScriptを書く
axross
22
8.4k
作るのにデザイナーもエンジニアもない
axross
15
7.2k
なぜprottか
axross
4
2.7k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
400
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
250
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
ふつうの技術スタックでアート作品を作ってみる
akira888
0
320
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
エンジニア向け採用ピッチ資料
inusan
0
180
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
260
エラーって何種類あるの?
kajitack
5
340
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
580
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
RailsGirls IZUMO スポンサーLT
16bitidol
0
140
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Code Reviewing Like a Champion
maltzj
524
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A better future with KSS
kneath
239
17k
Making Projects Easy
brettharned
116
6.3k
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