Как я могу отправить данные, полученные из API, в объект? - PullRequest
Новая
       61

Как я могу отправить данные, полученные из API, в объект?

0 голосов
/ 03 августа 2020

Я пытаюсь создать функцию добавления продукта в корзину с помощью redux-react

и как я могу получить информацию о моем продукте из mongoDB в initialState?

вот как мой информация о продукте выглядит так: 

img_url1: "https://thebeuter.com/wp-content/uploads/2020/06/38-1.jpg"
price: 1290000
title: "BEUTER BACK2BACK ZIPPER WHITE JACKET"

вот мой редуктор: 

import {
    ADD_PRODUCT_BASKET,
    GET_NUMBERS_BASKET
} from '../actions/type'

const initialState = {
    basketNumbers: 0,
    cartCost: 0,
    products: {

    }
}


export default (state = initialState, action) => {
    switch (action.type) {
        case ADD_PRODUCT_BASKET:
            let addQuantity = {
                ...state.products[action.payload]
            }
            console.log(addQuantity)
            return {
                ...state,
                basketNumbers: state.basketNumbers + 1,
            };
        case GET_NUMBERS_BASKET:
            return {
                ...state
            };
        default:
            return state;
    }
}

Вот мой github, если вы хотите посмотреть мой код: https://github.com/nathannewyen/the-beuter

1 Ответ

0 голосов
/ 05 августа 2020

Вы решаете свою проблему с помощью redux-saga (или redux-thunk), извлекая данные из БД перед рендерингом страницы:

productBasket. js (с redux-saga) 

import axios from 'axios';
import { action as createAction } from 'typesafe-actions';
import {
    put, select, takeLatest,
} from 'redux-saga/effects';

export const FETCH_PRODUCT_BASKET = 'FETCH_PRODUCT_BASKET';
export const FETCH_PRODUCT_BASKET_SUCCESS = 'FETCH_PRODUCT_BASKET_SUCCESS';
export const FETCH_PRODUCT_BASKET_ERROR = 'FETCH_PRODUCT_BASKET_ERROR';

export const actionCreators = {
    fetchProductBasket: () =>
        createAction(FETCH_PRODUCT_BASKET),
    fetchProductBasketSuccess: (products) =>
        createAction(FETCH_PRODUCT_BASKET_SUCCESS, { products }),
    fetchProductBasketError: (error) =>
        createAction(FETCH_PRODUCT_BASKET_ERROR, { error }),
};

export const {
    fetchProductBasket,
    fetchProductBasketSuccess,
    fetchProductBasketError
} = actionCreators;

export const initialState = {
    isFetching: false,
    isError: false,
    basketNumber: 0,
    products: []
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
    case FETCH_PRODUCT_BASKET:
        return {
            ...state,
            isFetching: true,
            isError: false
        }
    case FETCH_PRODUCT_BASKET_SUCCESS:
        return {
            ...state,
            isFetching: false,
            isError: false,
            products: action.payload.products
        }
    case FETCH_PRODUCT_BASKET_ERROR:
        return {
            ...state,
            isFetching: false,
            isError: true
        }
    default:
        return state;
    }
}

export default reducer;

export function* basketSaga() {
    yield takeLatest(FETCH_PRODUCT_BASKET, fetchProductBasketSaga);
}

function* fetchProductBasketSaga() {
    try {
        // here is code with fetching data 
        const { data } = yield axios.get('some address');
        
        yield put(fetchProductBasketSuccess(data));
    } catch (err) {
        console.log(err);
        yield put(fetchProductBasketError(err));
    }
}

И после этого отправьте действие fetchProductBasket в области useEffect вашего компонента. Вы можете показать скелет пользователю во время загрузки данных.

...