Learn what Redux is and how you can follow the redux architecture to scale and organize your applications.
1State is the sourceof all bugs.
View Slide
2
2Does this involvenew libraries?
2Yes.Get Over It.
3New phone, who dis?
4
5
6
7
8
9
10
11@VinSpee
12typeof thisFont == ‘code’
13State is the sourceof all bugs.
14State is the sourceof all bugs. Pretty much.
15State is the sourceof all bugs. Pretty much.At least the weird onesthat aren’t browser-related.
16
17Redux
18Redux
19
20Redux
21Redux
22lol georbascrib bye
23• JavaScript — redux• .NET — redux.NET• Java — reductor• Swift — ReSwift• Objective-C — Reflow• PHP — php-redux• ruby — redux.rb
24Redux
25state{}
26state{}store
27state{} {}new statestore
28state{} {}new statestorere-poo-cer
29 = state.yourProp = newValue;statere-poo-cer
30Mutable operationsnecessitate side-effects.
31state{}store{}new state
32 =(state, { payload }) => ({...state,yourProp: payload.newValue,});
33state{} {}new statestorereducer
34state dispatcher action
35dispatcherdispatch({type: VIDEO.PLAY.REQUESTED,payload: videoPlayerInstance,});
36actiontype: VIDEO.PLAY.REQUESTED,type: VIDEO.PLAY.FULFILLED,type: VIDEO.PLAY.REJECTED,type: ROUTER.UPDATE_LOCATION,
37action(state, { type, payload }) => {switch (type) {case VIDEO.PLAY.REQUESTED:return {...state,loading: true,};…
38actionimport { union } from ‘tagmeme’;const VideoPlayer = union([‘Requested’, ‘Fulfilled’, ‘Rejected’]);(state, action) => VIDEO_PLAYER.match(action,{Requested: () => ({ ...state, loading: true }),Fulfilled: () => ({ ...state, loading: false, status: ‘PLAYING’ }),Rejected: (error) => ({ ...state, loading: false, error }),},);
39action(state, { type, payload }) => {switch (type) {case VIDEO.PLAY.REQUESTED:return {...state,loading: true,};…
40This is the beauty ofRedux.
41State can only beupdated as a result of anaction.
42We have a record ofactions.
43
44How do I connect it to myUI?
45uiconst VideoPlayer = ({ status, onPlay, onPause }) => ({status !== ‘PLAYING’ ? (play) : (pause)});
46uiconnect(state => ({status: state.status,}), dispatch => ({onPlay: () => dispatch(VIDEO.PLAY.REQUESTED),onPause: () => dispatch(VIDEO.PAUSE.REQUESTED),})(VideoPlayer),
47Couldn’t my state tree geta bit messy?
48Couldn’t my state tree geta bit messy?YES.
49Tips
501. Normalize your data.
51{users: [{id: 1,name: ‘Sam Hanes’,email: ‘[email protected]',},],},
52{users: {entities: [1: {id: 1,name: ‘Sam Hanes’,email: ‘[email protected]',},],result: [1],},},
53const entify = d =>d.reduce((a,c) => ({...a,entities: {...a.entities,[c.id]:c,},result: [...a.result, c.id],}),{});
542. Don’t use booleans foreverything.videoPlayer: {isPlaying: false,}
55videoPlayer: {isPlaying: false,isPaused: true,isLoaded: true,}2. Don’t use booleans foreverything.
56videoPlayer: {status: ‘PLAYING’,loading: ‘COMPLETE’}2. Don’t use booleans foreverything.
573. Push outside concernsinto middleware.
583. Push outside concernsinto middleware.wait, wtf is middleware?
59middlewareMiddleware are “actioninterceptors” that canexecute side effects.
60middleware- Analytics
61middleware- Analytics-API calls
62middleware- Analytics-API calls-Legacy Systems
63loginpressdispatchloginauthmiddleware
64auth middlewareconst authMiddleware = store => next => action => {if (action.type === 'LOGIN') {return legacy.login(action.payload).then(res =>next({...action,payload: res,}));}return next(action);}
653. Push outside concernsinto middleware.
664. Use selectorsstate => ({status: select.getPlayerStatus(state),})
675. Use constants to nameactions and use actioncreators
686. Put everything in yourglobal state tree.
69Redux
70• JavaScript — redux• .NET — redux.NET• Java — reductor• Swift — ReSwift• Objective-C — Reflow• PHP — php-redux• ruby — redux.rb
71@VinSpee
vinspee
sumiren
hanhan1978
abenben
aramaki
kenichirokimura
nikkei_engineer_recruiting
okunokentaro
lmi
you
onk
k1low
drumath2237
eileencodes
dougneiner
eitanlees
jasonvnalue
lara
aki_iinuma
garrettdimon
keavy
notwaldorf
morganepeng
samlambert
caitiem20