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
Reduxについて / Redux introduction and TODO example...
Search
shike
December 22, 2017
Programming
0
110
Reduxについて / Redux introduction and TODO example with Redux
会社(株式会社Cluex)の社内LT大会にてReduxについて発表しました。
Flux・Reduxの基本概念についてと、Reduxを使ったTODOアプリの紹介をしました。
shike
December 22, 2017
Tweet
Share
More Decks by shike
See All by shike
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator
shike0909
1
2.2k
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
shike0909
0
150
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
shike0909
0
130
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
2.2k
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
860
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
130
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
ニーリーにおけるプロダクトエンジニア
nealle
0
870
テスト駆動Kaggle
isax1015
1
430
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
93
31k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
KATA
mclloyd
30
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How GitHub (no longer) Works
holman
314
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Side Projects
sachag
455
42k
Why Our Code Smells
bkeepers
PRO
336
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
Reduxについて 2017/12/22 Cluex.inc 柴山健吾
アジェンダ 1. Fluxとは 2. Reduxとは 3. Reduxを使ってTODOアプリ 2
Fluxとは 3
Flux • Facebookが提唱した単一方向データフローアーキテクチャ http://facebook.github.io/flux/ • 以下の3つが主要な要素 ◦ dispatcher ◦ store
◦ view • facebook/fluxはこのアーキテクチャのリファレンス実装 4
Fluxのデータフロー 5 Flux公式ドキュメントより
Fluxの特徴 • 単一方向のデータバインディング • dispatcher, store, viewにより責務を適切に分割 6
Reduxとは 7
Redux • JSアプリの状態管理のためのライブラリ ◦ Redux is a predictable state container
for JavaScript apps. • Fluxアーキテクチャの実装の一つ • Reduxの三原則 ◦ Single source of truth ◦ State is read-only ◦ Changes are made with pure functions 8
Reduxのデータフロー 9
Reduxのデータフロー(Side Effectあり) 10
Reduxの特徴 • 状態管理を単一方向フローで行うために Fluxベースで作られたライブラリ • 関数を使うことでシンプルにしている ◦ Redux is true
to the Flux architecture, but makes it simpler thanks to pure functions. • あくまでやるのは状態管理のみで、副作用が伴う処理はやらない • React以外でも使える 11
Reduxを使ってTODOアプリ 12
View 13
View 14 import { bindActionCreators } from 'redux'; import {
connect } from 'react-redux'; import * as actions from '../actions/actions'; const mapDispatchToProps = dispatch => { return { actions: bindActionCreators(actions, dispatch) }; }; let AddTodo = ({ actions }) => { const onSubmit = e => { e.preventDefault(); actions.addTodo({ text: this.text.value }); this.text.value = ''; }; return ( <form onSubmit={onSubmit}> <input type="text" ref={input => (this.text = input)} /> <input type="submit" value="Add Todo" /> </form> ); }; AddTodo = connect(null, mapDispatchToProps)(AddTodo); export default AddTodo;
View 15 import { bindActionCreators } from 'redux'; import {
connect } from 'react-redux'; import * as actions from '../actions/actions'; const mapDispatchToProps = dispatch => { return { actions: bindActionCreators(actions, dispatch) }; }; let AddTodo = ({ actions }) => { const onSubmit = e => { e.preventDefault(); actions.addTodo({ text: this.text.value }); this.text.value = ''; }; return ( <form onSubmit={onSubmit}> <input type="text" ref={input => (this.text = input)} /> <input type="submit" value="Add Todo" /> </form> ); }; AddTodo = connect(null, mapDispatchToProps)(AddTodo); export default AddTodo; propsに渡すaction Componentのpropsにaction が渡される ComponentにReduxの actionをつなぐ actionの呼び出し
Action 16
Action export const addTodo = payload => { return {
type: ’ADD_TODO’, payload }; }; 17
Action export const addTodo = payload => { return {
type: ’ADD_TODO’, payload }; }; 18 viewから渡されるデータ { text: ‘Do something’ }のようなObjectが渡される Flux Standard Action × Bad { type: ‘ADD_TODO’, text: ‘Do something’ } ◦ Good { type: ‘ADD_TODO’, payload: { text: ‘Do something’ } }
Reducer 19
Reducer 20 import { handleActions } from 'redux-actions'; const todos
= handleActions( { ADD_TODO: (state, action) => { return [ ...state, { text: action.payload.text } ]; } },initialState); export default todos;
Reducer 21 import { handleActions } from 'redux-actions'; const todos
= handleActions( { ADD_TODO: (state, action) => { return [ ...state, { text: action.payload.text } ]; } },initialState); export default todos; actionのtype 現在のstateとaction 新しいstateを生成
Reducer (redux-actionsなし) 22 const todos = (state, action) => {
switch (action.type) { case 'ADD_TODO': return [ ...state, { text: action.payload.text } ]; default: return state } } export default todos;
Store 23
Store 24 import { render } from 'react-dom'; import {
Provider } from 'react-redux'; import { createStore } from 'redux'; import todoApp from './reducers'; import App from './App'; let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') );
Store 25 import { render } from 'react-dom'; import {
Provider } from 'react-redux'; import { createStore } from 'redux'; import todoApp from './reducers'; import App from './App'; let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') ); reducerを元にstoreを生成
View import { connect } from 'react-redux'; import Todo from
'../components/Todo'; const mapStateToProps = state => { return { todos: state.todos }; }; let TodoList = ({ todos }) => ( <ul> {todos.map((todo, index) => ( <Todo key={index} {...todo} /> ))} </ul> ); TodoList = connect(mapStateToProps)(TodoList); export default TodoList; 26
View import { connect } from 'react-redux'; import Todo from
'../components/Todo'; const mapStateToProps = state => { return { todos: state.todos }; }; let TodoList = ({ todos }) => ( <ul> {todos.map((todo, index) => ( <Todo key={index} {...todo} /> ))} </ul> ); TodoList = connect(mapStateToProps)(TodoList); export default TodoList; 27 propsに渡すstate ComponentにReduxの stateを渡す Componentのpropsに stateが渡される
まとめ 28
まとめ 29 • Fluxとはアーキテクチャの名称 • ReduxはFluxに基づいて実装されたライブラリ • Reduxを使うことでReactおよびその他JSアプリでの状態管理がわかりやすく、安全にできる • APIコールなどの副作用が必要になると
middlewareが別途必要になるので辛そう・・・ • 一気にライブラリがたくさん出てくるので総合的に見ると学習コスト高い
Fin. 30