ddimonn8080
@ddimonn8080

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

Здравствуйте. Изучаю 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;
    }
}

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

Спасибо.
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Так будет лучше:
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;
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы