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 with Redux
Search
shike
December 22, 2017
Programming
0
89
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.1k
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
shike0909
0
130
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
shike0909
0
120
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
1.9k
Other Decks in Programming
See All in Programming
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
870
"config" ってなんだ? / What is "config"?
okashoi
0
210
PostmanでAPIの動作確認が楽になった話
h455h1
0
110
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
ONE WEDGE_company_guide
1wedge_one
0
370
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
We Have a Design System, Now What?
morganepeng
42
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
Six Lessons from altMBA
skipperchong
20
3k
What the flash - Photography Introduction
edds
64
11k
Web Components: a chance to create the future
zenorocha
305
41k
Become a Pro
speakerdeck
PRO
10
4.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.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