Consuming services reliably in Redux without losing your mind

We identify potential issues with the most common ways of consuming services. And, wait for it... Solve them.

Transcript

1. Consuming services reliably in Redux without losing your mind Sidhartha Chatterjee me@sidharthachatterjee.com @chatsidhartha
2. Introduction • Redux is awesome • Patterns are awesome • Leave trial and error to the early adopters • Redux Middleware is very powerful • Simplicity winsTM
3. Pain • Authorization • Caching • Automatic retries? • Error handling • Race conditions
4. Promises, Thunks, Sagas? • Manual fetch, success and failure actions are common • Sagas are complicated • Middleware is best • Redux Standard API-calling Actions (RSAAs) • Keep It Simple Silly
5. Manually dispatching actions export const fetchPizza = (type) => { return (dispatch, getState) => { dispatch({ type: FETCH_PIZZA }) return fetch(`https://hipsters.pizza/${type}`) .then(response => response.json()) .then(pizza => dispatch({ type: RECEIVE_PIZZA, pizza })) .catch(error => dispatch({ type: FAILURE_PIZZA, error })) } }
6. API Middleware export function createApiMiddleware() { return store => next => action => { const apiService = new ApiService( apiAction, store.dispatch ); return apiService.call(); } }
7. Automating the dispatches export class ApiService { call() { this.startApiRequest() return fetch.apply(this, fetchArgs) .then(checkResponseIsOk) .then(completeApiRequest) .catch(catchApiRequestError); } }
8. Boom dispatch({ type: FETCH, fetchArgs })
9. Authentication • Access tokens, refresh tokens • JWT • Token expiry is a pain • Write things once
10. Manual Authorisation export const fetchPizza = (type) => { return (dispatch, getState) => { dispatch({ type: FETCH_PIZZA }) return fetch(`https://hipsters.pizza/${type}`, { headers: { 'Authorization': 'Bearer ' + getState().token } }) } }
11. 403: You aren’t authorised to order
12. Refresh tokens automatically export class ApiService { call() { if (this.shouldRefreshToken() { this.fetchNewToken() .then((newToken) => { this.startApiRequest() ... }) } else { this.startApiRequest() ... } } }
13. Automatic Retries • Better user experience • Because networks are the devil • Rate limiting
14. Refresh tokens automatically export class ApiService { catchApiRequestError() { const maxAttempts = 5 const retryFactor = 10 ... return this.call(...) } // Retry till you can and then dispatch failure call() { this.startApiRequest() return fetch.apply(this, fetchArgs) .then(checkResponseIsOk) .then(this.completeApiRequest) .catch(this.catchApiRequestError); } }
15. Cache? • Offline • localStorage, AsyncStorage, the kitchen sink • Browsers with no service workers (Hey there, Safari) • React Native, Desktop apps • yarn add redux-persist ( Zack)
16. Persist your store const store = createStore( combineReducers(reducers), initialState, compose( applyMiddleware(...middleware), autoHydrate() ) ) persistStore(store) persistStore(store, { whitelist: ['cart', 'checkout'] })
17. Buffer actions before rehydration import createActionBuffer from 'redux-action-buffer' const store = createStore( combineReducers(reducers), initialState, compose( applyMiddleware(...middleware, createActionBuffer(REHYDRATE)), autoHydrate() ) )
18. More for everyone!
19. Let’s work together Sidhartha Chatterjee me@sidharthachatterjee.com @chatsidhartha