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: Flux Reduced
Search
sporto
August 31, 2015
Technology
1
320
Redux: Flux Reduced
sporto
August 31, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
170
Elm
sporto
1
240
Practically Immutable
sporto
0
170
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
110
Go - A great language for building web applications
sporto
1
310
Other Decks in Technology
See All in Technology
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
MySQLのロックの種類とその競合
yoku0825
6
1.6k
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
Featured
See All Featured
Code Review Best Practice
trishagee
58
16k
Making Projects Easy
brettharned
111
5.7k
Ruby is Unlike a Banana
tanoku
96
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Gamification - CAS2011
davidbonilla
78
4.9k
GitHub's CSS Performance
jonrohan
1026
450k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Rails Girls Zürich Keynote
gr2m
93
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Optimizing for Happiness
mojombo
373
69k
Transcript
Redux flux reduced @sebasporto
Flux • Made popular by Facebook for building React applications
• Old pattern (CQRS) with different naming for everything
Flux View Dispatcher Action (Event) Users Store Posts Store Action
(Event) Change Grab New state
Flux Orders Stats 1 $400 2 $100 ... Countries 1
Aus 2 Fra ... Aus $500 Fra $600 ... Today $ 100 ... • Makes state consistency across views much easier
Component Singleton Flux Store Dispatcher Message Get state
Server side rendering • Original flux, everything is a singleton
• Make SSR much harder • Each request needs its own universe
Server side rendering • Flux implementations without singletons started showing
up • Alt, Fluxible, Flummox, etc
Request arrives Render Tree Pass everything Response Server side rendering
Create users store Create orders store Create dispatcher
Problem • Too many things to instantiate and pass around
What if we only have one state object? Users store
Orders store Countries store Reduced to { users orders countries }
Redux only has one big state tree Less things to
create and pass around ORDERS COUNTRIES USERS STATE
Now we can just move the dispatcher inside the state
obj Dispatcher State Reduced to { dispatch, state: { users orders ... } }
Redux is only one object 04 State Dispatch Redux store
Render Tree Pass store Response Server side rendering Create redux
instance Request
Traditional flux case 'USERS_FETCH_SUCCESS': users = action.users state.push(users) break •
We manage the state on the stores
What if we just describe the transformations?
• Inspired by ELM updaters update action model = case
action of Increment -> model + 1 Decrement -> model - 1
function reducer(state, action) { switch(action.type) { case 'USERS_FETCH_SUCCESS': users =
action.users return state.merge(users) ... } } Reducers in Redux
Reducers in Redux • The expect you to return a
copy of the state, not mutate it • This is great for debugging • Seamless-immutable is great for this
The state is managed by Redux, you only describe the
transformations
redux Redux View dispatch Action (Event) state Change Grab New
state Reducers
Components of Redux
{ type: 'USERS_FETCH_SUCCESS' users: [...] } Action
function fetchSuccess(users) return { type: 'USERS_FETCH_SUCCESS' users: [...] } }
Action creator
const action = fetchSuccess(users) store.dispatch(action) Dispatch
function reducer(state, action) { switch(action.type) { case 'USERS_FETCH_SUCCESS': users =
action.users return state.merge(users) } } Reducer
Interacting with the outside world? e.g. ajax
redux View dispatch Async Action state Change Reducers Async Action
creators Async action Request Response Action Run async action
function fetch() return function(dispatch) { doSomeAjax(...) .then(function(response) { const successAction(response.data)
dispatch(successAction) } } } Async Action creators
Middleware Middleware redux View dispatch Action Action
Middleware • Logging • Stoping unnecessary request • Async actions
• Dev tools 04 03 02 01
redux View dispatch Action state Change Reducers Redux is really
simple
Not React specific anymore • Just an event and state
management library • Can be used with other things e.g. ng-redux
Interacting directly with the store import { createStore } from
'redux' const store = createStore(reducers) store.getState() store.subscribe(listener) store.dispatch(action)
With React import { createStore } from 'redux' import Provider
from 'react-redux' const store = createStore({...}) React.render(( <Provider store={store}> {() => <App />} </Provider> ), mountNode);
Other cool stuff
Hot reloading • Works quite well most of the time
• Will keep state intact
Dev tools
Time travel
Redux-crud Building CRUD apps? • Standard actions creators and reducers
for CRUD apps • https://github.com/Versent/redux-crud
Thanks