2017-03-07 11 views
5

W moim reagują/Redux/thunk aplikacji używam czynności, takich jak:Jak byłaby Redux + Thunk działania/stałe

function catsRequested() { 
    return { 
     type: CATS_REQUESTED, 
     payload: {}, 
    }; 
} 

function catsReceived(landings) { 
    return { 
     type: CATS_RECEIVED, 
     payload: landings, 
    }; 
} 

function catsFailed(error) { 
    return { 
     type: CATS_FAILED, 
     payload: { error }, 
    }; 
} 

export const fetchCats =() => ((dispatch, getState) => { 
    dispatch(catsRequested()); 
    return catsAPI.loadCats() 
     .then((cats) => { 
      dispatch(catsReceived(cats)); 
     }, (e) => { 
      dispatch(catsFailed(e.message)); 
     }); 
}); 

Aby poradzić sobie z pewnymi danymi (uproszczony). Wszystko działa, ale mam dużo kodu dla każdej encji danych (i stałych). Mam na myśli takie same funkcje dla psów, tygrysów, ptaków itp ...

Widzę, że są podobne akcje żądane/otrzymane/nieudane/stałe dla każdej jednostki.

Jaki jest właściwy sposób minimalizowania kodu pod kątem redux-thunk?

+1

rozważa https://www.npmjs.com/package/redux-api-middleware –

Odpowiedz

4

można zachować swój kod wysuszyć, tworząc typy oraz twórców Thunk:

Typ:

const createTypes = (type) => ({ 
    request: `${type}_REQUESTED`, 
    received: `${type}_RECEIVED`, 
    failed: `${type}_FAILED`, 
}); 

Thunk:

const thunkCreator = (apiCall, callTypes) => ((dispatch, getState) => { 
    dispatch({ type: callTypes.request }); 

    return apiCall 
     .then((payload) => { 
      dispatch({ type: callTypes.received, payload })); 
     }, (e) => { 
      dispatch({ type: callTypes.failed, payload: e.message })); 
     }); 
}); 

Nie można utworzyć metodę sprowadzania z 2 linie kodu:

export const fetchCatsTypes = createTypes('CATS'); // create and export the constants 
export const fetchCats = (catsAPI.loadCats, fetchCatsTypes); // create and export the thunk 

export const fetchDogsTypes = createTypes('DOGS'); // create and export the constants 
export const fetchDogs = (dogsAPI.loadDogs, fetchDogsTypes); // create and export the thunk 

Uwaga: użyjesz także stałej typów (fetchDogsTypes) w reduktorach.

Powiązane problemy