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
120
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
140
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
2.2k
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
速いWebフレームワークを作る
yusukebe
5
1.7k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
390
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
430
為你自己學 Python - 冷知識篇
eddie
1
350
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
Improving my own Ruby thereafter
sisshiki1969
1
160
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
340
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
The Pragmatic Product Professional
lauravandoore
36
6.9k
Designing for humans not robots
tammielis
253
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
How to Ace a Technical Interview
jacobian
279
23k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
RailsConf 2023
tenderlove
30
1.2k
Documentation Writing (for coders)
carmenintech
74
5k
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