How to refactor redux + thunk actions/constants

Question

In my react/redux/thunk application I use actions like:

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

To deal with some data (simplified). Everything works but i have a lot of code for every data entity (and constants too). I mean same functions for dogs, tigers, birds etc...

I see there are similar requested/received/failed action/constant for every entity.

What is right way to minify code in terms of redux-thunk?

Answer 1

You can keep your code DRY by creating a types and a thunk creators:

Type:

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

Now you can create a fetch method with 2 lines of code:

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

Note: you'll also use the types constant (fetchDogsTypes) in the reducers.