Класс обслуживания React Axios

Question

Я использую axios для обработки вызовов API в моем приложении React / Redux. Токен установлен глобально.

Вот несколько примеров:

// Add Post
export const addPost = postData => dispatch => {
    dispatch(clearErrors());

    axios
        .post('/api/posts', postData)
        .then(res =>
            dispatch({
                type: ADD_POST,
                payload: res.data,
            })
        )
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data,
            })
        );
};

// Add Comment
export const addComment = (postId, commentData) => dispatch => {
    dispatch(clearErrors());

    axios
        .post(`/api/posts/comment/${postId}`, commentData)
        .then(res =>
            dispatch({
                type: GET_POST,
                payload: res.data,
            })
        )
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data,
            })
        );
};

// Get posts
export const getPosts = () => dispatch => {
    dispatch(setPostsLoading);

    axios
        .get('/api/posts')
        .then(res =>
            dispatch({
                type: GET_POSTS,
                payload: res.data,
            })
        )
        .catch(err =>
            dispatch({
                type: GET_POSTS,
                payload: null,
            })
        );
};

// Delete post
export const deletePost = id => dispatch => {
    axios
        .delete(`/api/posts/${id}`)
        .then(res =>
            dispatch({
                type: DELETE_POST,
                payload: id,
            })
        )
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data,
            })
        );
};

Скажите, пожалуйста, как лучше всего обрабатывать такие вызовы API в масштабируемом приложении? Может быть, есть пример класса оболочки / службы Axios, чтобы упростить его и не писать одну и ту же логику каждый раз?

Спасибо!

Answer 1

Вы можете легко использовать небольшую функцию карри для этого:

 const api = (url, type, errorType) => postData => dispatch => {
  dispatch(clearErrors());

  axios
    .post(url, postData)
    .then(res =>
        dispatch({
            type,
            payload: res.data,
        })
    )
    .catch(err =>
        dispatch({
            type: errorType,
            payload: err.response.data,
        })
    );
};

Это может быть использовано как:

export const addPost = api("api/post", ADD_POST, GET_ERRORS);

 export const addComment = (postId, data) => api(`/api/posts/comment/${postId}`, ADD_COMMENT, GET_ERRORS)(data);