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
330
Redux: Flux Reduced
sporto
August 31, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Practically Immutable
sporto
0
190
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Go - A great language for building web applications
sporto
1
340
Other Decks in Technology
See All in Technology
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
roppongirb_20250911
igaiga
1
230
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.5k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
260
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
630
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
160
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
160
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
410
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
400
Featured
See All Featured
Scaling GitHub
holman
463
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Git: the NoSQL Database
bkeepers
PRO
431
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Building an army of robots
kneath
306
46k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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