Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
350
UIコンポーネント指向と「協働」
axross
6
2.9k
安全なJavaScriptを書く
axross
22
8.7k
作るのにデザイナーもエンジニアもない
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
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
atsuki_seo
0
690
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
kobakei
0
110
Security issues being discussed on Web Platforms
petamoriken
0
940
Vue Fes Japan 2026 タイムテーブル徹底解説
448jp
0
150
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
otouto
0
280
iOSDC Japan 2026 - Swiftで作って学ぼう!データベース自作入門
kaseken
2
160
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
bash0c7
0
390
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
riku_sakamoto
0
330
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
150
XP祭りでしか伝わらないフリップネタ #xpjug
murabayashi
0
150
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
convto
5
7.1k
数年滞っていたダークモード対応をおよそ2週間で完了させる
chigichan24
0
710
Featured
See All Featured
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
So, you think you're a good person
axbom
PRO
2
2.2k
Evolving SEO for Evolving Search Engines
ryanjones
0
290
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.4k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
540
Site-Speed That Sticks
csswizardry
13
1.5k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
490
Building AI with AI
inesmontani
PRO
1
1.2k
How GitHub (no longer) Works
holman
316
150k
The Invisible Side of Design
smashingmag
301
52k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
990
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