Reduxflux reduced@sebasporto
View Slide
Flux• Made popular by Facebook for building Reactapplications• Old pattern (CQRS) with different naming foreverything
FluxViewDispatcherAction(Event)Users StorePosts StoreAction (Event)ChangeGrabNewstate
FluxOrders Stats1 $4002 $100...Countries1 Aus2 Fra...Aus $500Fra $600...Today $ 100...• Makes state consistency across views much easier
ComponentSingleton FluxStore DispatcherMessageGet 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 startedshowing up• Alt, Fluxible, Flummox, etc
RequestarrivesRenderTreePass everythingResponseServer side renderingCreate users storeCreate orders storeCreate dispatcher
Problem• Too many things to instantiateand pass around
What if we only have onestate object?Users storeOrders storeCountries storeReduced to{usersorderscountries}
Redux only hasone big state treeLess things to create andpass aroundORDERS COUNTRIESUSERSSTATE
Now we can just move thedispatcher inside the state objDispatcherStateReduced to{dispatch,state: {usersorders...}}
Redux is only one object04StateDispatchRedux store
RenderTreePass storeResponseServer side renderingCreate redux instanceRequest
Traditional fluxcase 'USERS_FETCH_SUCCESS':users = action.usersstate.push(users)break• We manage the state on the stores
What if we just describethe transformations?
• Inspired by ELM updatersupdate action model =case action ofIncrement -> model + 1Decrement -> model - 1
function reducer(state, action) {switch(action.type) {case 'USERS_FETCH_SUCCESS':users = action.usersreturn state.merge(users)...}}Reducers in Redux
Reducers in Redux• The expect you to return a copy of the state, notmutate it• This is great for debugging• Seamless-immutable is great for this
The state is managed byRedux, you only describe thetransformations
reduxReduxViewdispatchAction(Event)stateChangeGrabNewstateReducers
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.usersreturn state.merge(users)}}Reducer
Interacting with theoutside world? e.g. ajax
reduxViewdispatchAsync ActionstateChangeReducersAsync Action creatorsAsync actionRequestResponseActionRunasyncaction
function fetch()return function(dispatch) {doSomeAjax(...).then(function(response) {const successAction(response.data)dispatch(successAction)}}}Async Action creators
MiddlewareMiddlewarereduxViewdispatchActionAction
Middleware• Logging• Stoping unnecessary request• Async actions• Dev tools04030201
reduxViewdispatchActionstateChangeReducersRedux 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 withthe storeimport { createStore } from 'redux'const store = createStore(reducers)store.getState()store.subscribe(listener)store.dispatch(action)
With Reactimport { createStore } from 'redux'import Provider from 'react-redux'const store = createStore({...})React.render(({() => }), mountNode);
Other cool stuff
Hot reloading• Works quite well most of the time• Will keep state intact
Dev tools
Time travel
Redux-crudBuilding CRUD apps?• Standard actions creators and reducers for CRUDapps• https://github.com/Versent/redux-crud
Thanks