Как правильно использовать thunk в react приложении?

Question

[Дмитрий]

Здравствуйте. Изучаю react в связке с redux. Можно ли таким образом использовать thunk для создания асинхронного действия?

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

можно ли не разделять действие setProductSingle на три отдельных события?

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

Где-то читал что не обязательно разделять на три действия.

Спасибо.

Answer 1

[Антон Спирин]

Так будет лучше:

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

Comments

[Дмитрий]

а почему не через .then() ?
так

[Антон Спирин]

Дмитрий, можно и так. Разница только в синтаксисе. Пишите как больше нравится. async/await, по мне, гораздо удобней в использовании.

[Дмитрий]

Антон Спирин, спасибо большое что указываете правильное направление

[Дмитрий]

Антон Спирин, привел к такому виду но не рендерит

export const setProductBySlug = slug => {
    return async dispatch => {
        dispatch({ type: SET_PRODUCT_BY_SLUG });

        axios.get(`/api/products/${slug}`)
            .then(data => {
                dispatch({ type: SET_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
            }).catch(err => {
                dispatch({ type: SET_PRODUCT_BY_SLUG_FAILED, payload: err });
            });

        /*try {
            const { data } = await axios.get(`/api/products/${slug}`);
            dispatch({ type: SET_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
        } catch (err) {
            dispatch({ type: SET_PRODUCT_BY_SLUG_FAILED, payload: mapAxiosError(err) });
        }*/
    };
}

В чём ошибка?

[Антон Спирин]

Дмитрий, ну надо смотреть, что происходит в редьюсере. Проходит ли запрос. Советую поставить расширение redux dev tools, если не используется.

[Дмитрий]

Антон Спирин, нашел проблему вместо (data) надо было ({data})
Тут другая проблема, если ошибка запроса(неправильный slug или путь) то все полностью ломается
Насколько я понял надо делать переадресацию на 404 либо как-то выводить сообщение об ошибке что такого товара нет?

[Дмитрий]

Антон Спирин, и вообще странно почему проходит SET_PRODUCT_BY_SLUG_SUCCEEDED если путь не верный?Верней они оба проходят вместе с SET_PRODUCT_BY_SLUG_FAILED

[Антон Спирин]

Дмитрий, да. Код должен быть отказоустойчивым.

if (!product) render <Error404 title="Product not found" />;

По поводу двух ответов, надо код ваш смотреть. Все части компонент, редьюсер, константы, действия.

[Дмитрий]

Антон Спирин, вот код буду признателен если посмотрите