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
AIともっと楽するE2Eテスト
myohei
8
3k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
450
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Porting a visionOS App to Android XR
akkeylab
0
680
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
テスト駆動Kaggle
isax1015
1
640
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
GPUを計算資源として使おう!
primenumber
1
250
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
GitHub's CSS Performance
jonrohan
1031
460k
Documentation Writing (for coders)
carmenintech
72
4.9k
Automating Front-end Workflow
addyosmani
1370
200k
It's Worth the Effort
3n
185
28k
Typedesign – Prime Four
hannesfritz
42
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Scaling GitHub
holman
460
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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