What is the correct way to use thunk in a react application?

Question

React

Hello. I'm learning react in conjunction with redux. Is it possible to use thunk in this way to create an asynchronous action?

actions/products.js

import { SET_PRODUCTS, SET_PRODUCT_SINGLE, SET_PRODUCT_COMMENTS, SHOW_ALL, BESTSELLER, FACE, BODY, SCRUB } from './types';

export const setProducts = products => ({
    type: SET_PRODUCTS,
    payload: products
});

export const setProductSingle = product => ({
    type: SET_PRODUCT_SINGLE,
    payload: product
});

export const setProductComments = comments => ({
    type: SET_PRODUCT_COMMENTS,
    payload: comments
});

export const fetchProductData = url => {
    return dispatch => {
        axios.get(url)
            .then(({data}) => {
                dispatch(setProductSingle(data))
            });
    }
};

export const CategoryFilters = {
    SHOW_ALL: SHOW_ALL,
    BESTSELLER: BESTSELLER,
    FACE: FACE,
    BODY: BODY,
    SCRUB: SCRUB,
};

is it possible not to separate the action setProductSingleinto three separate events?

reducers/products.js

import { SET_PRODUCTS, SET_PRODUCT_SINGLE, SET_PRODUCT_COMMENTS} from '../actions/types';

const INITIAL_STATE = {
    isReady: false,
    isSingleReady: false,
    isCommentsReady: false,
    items: [],
    product: {},
    comments: [],
};

export default function (state = INITIAL_STATE,action){
    switch (action.type) {
        case SET_PRODUCTS:
            return {
                ...state,
                items: action.payload,
                isReady: true
            };
        case SET_PRODUCT_SINGLE:
            return {
                ...state,
                product: action.payload,
                isSingleReady: true
            };
        case SET_PRODUCT_COMMENTS:
            return {
                ...state,
                comments: action.payload,
                isCommentsReady: true,
            };
        default:
            return state;
    }
}

I read somewhere that it is not necessary to divide into three actions.
Thank you.

Answer 1

It will be better this way:

function fetchProductBySlug(slug) {
  return async dispatch => {
    dispatch({ type: FETCH_PRODUCT_BY_SLUG });
    try {
      const { data } = await axios.get(`/products/${slug}`);
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
    } catch (err) {
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_FAILED, payload: mapAxiosError(err) });
    }
  }; 
}

export default function product(state = initialState, action) { 
  switch(action.type) {
    case FETCH_PRODUCT_BY_SLUG:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_SUCCEEDED:
      return {
        ...state,
        product: action.payload,
        isFetching: false,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}