This document provides an overview of using Redux middleware for asynchronous actions, logging, analytics, and authentication. It demonstrates how to structure asynchronous action creators to work with Redux Thunk middleware and make API calls. It also shows how to build custom middleware to handle API requests, add authentication headers, and process responses. The document recommends middleware as a way to separate logic from components and encourages further reading on middleware patterns and the Redux ecosystem.

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

2. WHAT WILL WE LEARN?
1. Cool stuff
2. Lots of cool libraries

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

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

6. Middleware

7. MIDDLEWARE?

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

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

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

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

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

13. API

14. REDUX THUNK?

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

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

17. 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) => {
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36. SUMMARY

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

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