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