Advanced usage of Redux

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

2. WHAT WILL WE LEARN?
1. Cool stuff

3. WHAT IS COOL STUFF?

4. 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?

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

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

8. FLUX

9. MVC
FLUX

11. Chat
Notifications
Messages
Page Title

12. Chat
Notifications
Messages
Page Title
Data

13. Components
Dispatcher
ActionsStores

14. REDUX

15. ONE STORE
ONE STATE

16. Components
Reducer
ActionsStore

17. Current State
Next State
Reducers
(processors)
Action

18. ADDING REDUX

19. Installation
npm install —save redux

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

21. REDUX BASE

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

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

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

25. USING THEM?

26. 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
);

27. 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
);

28. 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
);

29. 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
);

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

31. 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);

32. FIRST, REACT

33. CHANGE DETECTION

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

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

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

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

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

39. MUTATE STATE

40. OUR STATE
State
Recipes
Omelette Pancaek
User
Boris
T1

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

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

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

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

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

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

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

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

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

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

51. Immutability Libraries

52. The common ones
ImmutableJS
Seamless Immutable

53. Multiple Reducers

54. Redux Actions

55. Middleware

56. MIDDLEWARE?

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

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

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

60. 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'
}
});

61. 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
}
});

62. API

63. REDUX THUNK?

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

65. 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)
);
};

66. 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)
);
};
const fetchComments = () => (dispatch, getState) => {
};

67. 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)
);
};
const fetchComments = () => (dispatch, getState) => {
// Get headers (like auth) from state
// Calc URL
// etc
fetch(BASE_URL + ‘/comments’).then(
(data) => dispatch(setComments(data)),
(error) => console.log(error)
);
};

68. 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)
);
};
const fetchComments = () => (dispatch, getState) => {
// Get headers (like auth) from state
// Calc URL
// etc
fetch(BASE_URL + ‘/comments’).then(
(data) => dispatch(setComments(data)),
(error) => console.log(error)
);
};

69. 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)
);
};

70. 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)
);
};
const fetchUsers = () => ({
type: API,
payload: {
url: '/users',
success: setUsers
}
});

71. 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)
);
};
const fetchUsers = () => ({
type: API,
payload: {
url: '/users',
success: setUsers
}
});

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

73. Middleware
const apiMiddleware = ({ dispatch }) => next => action => {
if (action.type !== API) return next(action);
// Do something!
};

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

75. Middleware
const apiMiddleware = ({ dispatch }) => next => action => {
if (action.type !== API) return next(action);
const { url, success } = action.payload;
return fetch(BASE_URL + url)
.then(response => response.json())
.then(payload => dispatch({ type: success, payload }))
.catch(error => dispatch({ type: API_ERROR, error }));
};

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

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

78. 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 }`
}
});

79. Middleware + Auth
const apiMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type !== API) return next(action);
const { url, success } = action.payload;
return fetch(BASE_URL + url)
.then(response => response.json())
.then(payload => dispatch({ type: success, payload }))
.catch(error => dispatch({ type: API_ERROR, error }));
};

80. Middleware + Auth
const apiMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type !== API) return next(action);
const { url, success } = action.payload;
const { authToken } = getState().user;
if (authToken) {
// Set headers
}
return fetch(BASE_URL + url)
.then(response => response.json())
.then(payload => dispatch({ type: success, payload }))
.catch(error => dispatch({ type: API_ERROR, error }));
};

81. API With Params
const fetchUsers = () => ({
type: API,
payload: {
url: '/users',
success: setUsers,
preProcess: preProcessIncomingData,
customSpinner: 'users',
error: customErrorHandler,
timeout: 5000,
useAuth: false
}
});

82. Testing?
const fetchUsers = () => ({
type: API,
payload: {
url: '/users',
success: setUsers,
preProcess: preProcessIncomingData,
customSpinner: 'users',
error: customErrorHandler,
timeout: 5000,
useAuth: false
}
});

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

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

85. INSIDE REDUX

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

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

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

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

90. HIGHER ORDER REDUCERS
import undoable from 'redux-undo';
const reducer = combineReducers({
users,
recipes,
comments: undoable(comments)
});

91. HIGHER ORDER REDUCERS
import undoable from 'redux-undo';
const reducer = combineReducers({
users,
recipes,
comments: undoable(comments)
});
import { ActionCreators } from 'redux-undo';
store.dispatch(ActionCreators.undo())

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

93. MORE!
import undoable from 'redux-undo';
import { ignoreActions } from 'redux-ignore';
const reducer = combineReducers({
users,
recipes,
comments: undoable(comments)
});

94. MORE!
import undoable from 'redux-undo';
import { ignoreActions } from 'redux-ignore';
const reducer = combineReducers({
users,
recipes,
comments: undoable(comments)
});

95. MORE!
import undoable from 'redux-undo';
import { ignoreActions } from 'redux-ignore';
const reducer = combineReducers({
users,
recipes: ignoreActions(recipes, [ SCROLL_PAGE ]),
comments: undoable(comments)
});

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

97. CONSTATS CREATOR?

99. SUMMARY

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

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

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