Comment Investo a divisé par ~2 la compléxité autours des tickets redux requête
Start
Success
Error
isLoading = true
error = false
data = {}
isLoading = false
error = false
data = { ... }
isLoading = false
error = true
data = {}
Reset
isLoading = false
error = false
data = {}
isLoading = false
error = false
data = {}
state
action
Async action flow in Redux
Automatically handle each repetitive actions and state changes with Redux Enhancer
const actionTypes = {
FETCH: {
START: 'FETCH_ACADEMY_MODULES.START',
SUCCESS: 'FETCH_ACADEMY_MODULES.SUCCESS',
FAILED: 'FETCH_ACADEMY_MODULES.FAILED',
RESET: 'FETCH_ACADEMY_MODULES.RESET',
},
};
Gestion Redux : loading/failed sur call
const reducer = (state = defaultState, action) => {
switch (action.type) {
case actionTypes.FETCH.START:
return {
...state,
loading: true,
failed: false,
};
case actionTypes.FETCH.SUCCESS:
return {
...state,
list: action.payload.list,
loading: false,
};
case actionTypes.FETCH.FAILED:
return {
...state,
loading: false,
failed: action.payload.error,
};
case actionTypes.FETCH.RESET:
return {
...state,
loading: false,
failed: false,
};
default:
return state;
}
};
const defaultState = {
requests: {
LOGIN: { loading: false, failed: false },
SIGNUP: { loading: false, failed: false },
},
};
Pour chaque requête :
- + de 30 lignes de code à dupliquer
- voir à tester
... c'est fastidieux et sujet à erreurs
- Ticket Requête Get : 3 points
- Ticket Requête Post : 5 points
- Ticket Affichage Loader : 3 points
- Ticket Affichage Erreur : 3 points
const reducer = (state, action) => {
switch (action.type) {
case actionTypes.REQUEST.LOGIN.SUCCESS:
return {
...state,
token: action.payload.token,
};
case actionTypes.REQUEST.SIGNUP.SUCCESS:
return {
...state,
token: action.payload.token,
};
default:
return state;
}
};
const enhancedReducer = (state = defaultState, action) =>
enhanceReducer('USER', state, action, defaultState, reducer);
const actionTypes = {
...enhanceActionTypes('USER', ['LOGIN', 'SIGNUP']),
LOGOUT: 'LOGOUT',
};
const defaultState = {
...enhanceDefaultState(['LOGIN', 'SIGNUP']),
};
Une fois factorisé
Un code factorisé et testé, réutilisé pour chaque call API
- Ticket Requête Get (+Loader) : 3 points
- Ticket Requête Post (+Loader) : 5 points
- Ticket Affichage Erreur : 2 points
Yokoten - Factorize your Redux Async Calls
By Xavier Lefèvre
Yokoten - Factorize your Redux Async Calls
- 739