Advanced redux

Reduxing
Like a pro!
Boris Dinkevich boris@500tech.com

WHAT WILL WE LEARN?
1. Cool stuff

WHAT IS COOL STUFF?
What is Redux

How it works

Connect()

Reducers

Immutability

seamless-immutable

Reducers

Action creators

Consts

redux-actions

Middleware

redux-thunk

API

more?

TOOLS
https://github.com/markerikson/redux-ecosystem-links

Boris Dinkevich
- 4 years Dev Ops
- 4 years Embedded C
- 4 years Ruby on Rails
- 4 years JavaScript (Angular/React)
Developing stuff

Chat
Notiﬁcations
Messages
Page Title

Chat
Notiﬁcations
Messages
Page Title
Data

Components
Dispatcher
ActionsStores

Components
Reducer
ActionsStore

Current State
Next State
Reducers
(processors)
Action

Installation
npm install —save redux

Store
import { createStore } from 'redux'; 
 
const store = createStore(x => x, {});

The Store
getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)

The Store
getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)
observable

Mini App
const reducer = (state, { type }) => type === 'INC' ? state + 1 : state; 
const store = Redux.createStore(reducer, 0);
 
const render = () => $('body').html(store.getState()); 
store.subscribe(render); 
 
setInterval( 
() => store.dispatch({ type: 'INC' }), 
300 
);

Mini App
const reducer = (state, { type }) => type === 'INC' ? state + 1 : state;
 
 
setInterval( 
300 
);

Mini App
const reducer = (state, { type }) => type === 'INC' ? state + 1 : state; 
 
setInterval( 
300 
);

IMPLEMENTATION?
https://codepen.io/borisd/pen/bWEovO

class Store {
constructor(reducer, state) {
Object.assign(this, { state, reducer, cbs: [] });
}
getState() {
return this.state
}
dispatch(action) {
this.state = this.reducer(this.state, action);
this.cbs.forEach(cb => cb());
}
subscribe(cb) {
this.cbs.push(cb);
return () => this.cbs = this.cbs.filter(i => i !== cb);
}
}
const createStore = (reducer, initialState) =>
new Store(reducer, initialState);

Change Detection
<Recipe />
<Recipes />
State
Id: 1
Recipes[]
Recipe
Title: ‘Two’
Recipe
Id: 2Title: ‘One’
<Recipes />

Change Detection
<Recipe />
<Recipes />
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
<Recipes />
setState({ recipes: newRecipes })

Change Detection
<Recipe />
<Recipes />
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
<Recipes />

OUR STATE
State
Recipes
Omelette Pancaek
User
Boris
T1

REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Pancake
T2

REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Recipes
Omelette Pancake
T2

REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
State
Recipes
Omelette Pancake
User
Boris
T2

IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
T1 T2

ACTION #2
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Omelett Pancake
User
Boris
T1 T2
State
Recipes
Bacon Pancake
User
Boris
T3

IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

Why not direct?
state.recipes[recipeId].name = newName;

OH, NO!
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Boris
User
Cat Pancake

OUT SIDE CHANGE
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

OH, NO!
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Cat
User
Cat Pancake

The common ones
ImmutableJS
Seamless Immutable

Middleware skeleton
function myMiddleware({ dispatch, getState }) { 
return function(next) { 
return function(action) { 
return next(action); 
} 
} 
}

Middleware skeleton
const myMiddleware = ({ dispatch }) => next => action => { 
return next(action); 
}

How long do actions take?
const benchmarkMiddleware = store => next => action => { 
console.time(action.type); 
next(action); 
console.timeEnd(action.type); 
};
> SET_USER: 0.645ms

Analytics
const analyticsMiddleware = () => next => action => {
const { analytics }= (action.meta || {});
next(action);
if (analytics) {
ga(analytics);
clickTable(analytics);
}
};
const addTodo = (name) => ({
type: ADD_TODO,
…
meta: {
analytics: 'add todo'
}
});

Auto Complete
dispatch(autoComplete('b')); // => 100ms: 1000 items
dispatch(autoComplete('bo')); // => 70ms: 70 items
dispatch(autoComplete('bor')); // => 3ms: 2 items
const autoComplete = (string) => ({
type: AUTO_COMPLETE,
payload: string,
meta: {
debounce: 500
}
});

Async Action Creators
 
const fetchUsers = () => (dispatch, getState) => { 
 
};

 
// Get headers (like auth) from state 
// Calc URL  
// etc 
fetch(BASE_URL + ‘/users’).then( 
(data) => dispatch(setUsers(data)), 
(error) => console.log(error) 
); 
};

 
// Calc URL  
// etc 
); 
};
const fetchComments = () => (dispatch, getState) => { 
 
};

 
// Calc URL  
// etc 
); 
};
const fetchComments = () => (dispatch, getState) => { 
// Calc URL 
// etc 
fetch(BASE_URL + ‘/comments’).then( 
(data) => dispatch(setComments(data)), 
); 
};

 
// Calc URL  
// etc 
); 
};
const fetchUsers = () => ({
type: API,
payload: {
url: '/users',
success: setUsers
}
});

Middleware
const apiMiddleware = ({ dispatch }) => next => action => {
};

Middleware
if (action.type !== API) return next(action);
// Do something!
};

Middleware
const { url, success } = action.payload;
return fetch(BASE_URL + url)
.then(response => response.json())
.then(payload => dispatch({ type: success, payload }));
};

Middleware
.then(payload => dispatch({ type: success, payload }))
.catch(error => dispatch({ type: API_ERROR, error }));
};

SYNC Action Creators
type: API,
payload: {
url: '/users',
success: setUsers
}
});
const fetchComments = () => ({
type: API,
payload: {
url: '/comments',
success: setComments
}
});

API With Params
const fetchUser = (id) => ({
type: API,
payload: {
url: `/users/${ id }`,
success: setUser
}
});

API POST
const updateUser = (id, data) => ({
type: API,
payload: {
method: 'UPDATE',
url: `/users/${ id }`,
data
}
});
const deleteComment = (id) => ({
type: API,
payload: {
method: 'DELETE',
url: `/comments/${ id }`
}
});

Middleware + Auth
const apiMiddleware = ({ dispatch, getState }) => next => action => {
};

Middleware + Auth
const apiMiddleware = ({ dispatch, getState }) => next => action => {
const { authToken } = getState().user;
if (authToken) {
// Set headers
}
};

API With Params
type: API,
payload: {
url: '/users',
success: setUsers,
preProcess: preProcessIncomingData,
customSpinner: 'users',
error: customErrorHandler,
timeout: 5000,
useAuth: false
}
});

Testing?
type: API,
payload: {
url: '/users',
success: setUsers,
preProcess: preProcessIncomingData,
customSpinner: 'users',
error: customErrorHandler,
timeout: 5000,
useAuth: false
}
});

Reducer Action Middleware
State partial with thunk ✓
Dispatch - with thunk ✓
Mutate Action - - ✓
Cancel Action - - ✓
POWER!

Why is that cool?
Dude where is my logic?
Oh right, middleware

MIDDLEWARE!
const lsMiddleware = ({ getState }) => next => action => { 
next(action); 
 
if (action.type === 'SET_LOCAL_STORAGE') { 
localStorage.setItem(
'redux',
JSON.stringify(getState())
); 
} 
};

How do we get it back?
Can’t SET STATE in middleware…
who can though?

Reducer decorators
• Whitelist actions
• Undo/Redo
• Speed test
• Tree relocation
• And much more

HIGHER ORDER REDUCERS
 
 
const reducer = combineReducers({ 
users, 
recipes, 
comments 
});

import undoable from 'redux-undo'; 
 
users, 
recipes, 
comments: undoable(comments) 
});

 
users, 
recipes, 
});
import { ActionCreators } from 'redux-undo'; 
 
store.dispatch(ActionCreators.undo())

Reducer decorators?
Or is it Enhancers?
Or higher order Reducers?

MORE!
import { ignoreActions } from 'redux-ignore'; 
 
users, 
recipes, 
});

MORE!
import { ignoreActions } from 'redux-ignore'; 
 
users, 
recipes: ignoreActions(recipes, [ SCROLL_PAGE ]), 
});

Endless cool stuff
Middlware decorators
Action creator decorators
Reducer decorators
Hell.. action constant creators!

https://redux-book.com
The Complete Redux Book

SHAMLESS PLUG
Using Redux and not sure if correct?
Invite us for an hour to talk code.
boris@500tech.com

And read our blog:
http://blog.500tech.com
Keep calm, Redux
@BorisDinkevich / boris@500Tech.com

Advanced redux

Recommended

More Related Content

What's hot (20)

Similar to Advanced redux (20)

Recently uploaded (20)

Advanced redux