how to get data API from mongoose to redux?

Question

I'm making an e-commerce with react and redux.

I'm trying to add my item into cart and how can I call API from back-end with redux?

Here is my cart action:

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

const initialState = {
    basketNumbers: 0,
    carCost: 0,
    products: {
       ...Product API in here...
    }
}

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

This is how I call api for my front-end with react:

  const [products, setProducts] = useState([]);
  const getProductsAPI = () => {
    axios
      .get("http://localhost:8000/api/products")
      .then((res) => {
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getProductsAPI();
  }, [props]);

Here is my project github. You can clone it or see my code. https://github.com/nathannewyen/the-beuter

Answer 1

I'm not sure what you mean by "call API from back end with redux", as redux is still part of the front-end logic. But I think what you're getting at is creating a redux action and reducer pair that calls your api.

// actions

export const getProductsAPI = () => {
    return function(dispatch){
      axios
        .get("http://localhost:8000/api/products")
        .then((res) => {
          dispatch({
            type: "SAVE_API_RESPONSE",
            payload: res.data
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

// reducers

export default (state = initialState, action) => {
    switch (action.type) {
        case "SAVE_API_RESPONSE":
          return {
            ...state,
            products: { ...action.payload } // not sure how you want to structure this
          }

        case ADD_PRODUCT_BASKET:
            ...

        case GET_NUMBERS_BASKET:
            ...

        default:
            return state;
    }
}

In your component:

import { useSelector, useDispatch } from 'react-redux'
import { getProductsAPI }  from '../actions'

const dispatch = useDispatch()
const products = useSelector(state => state.products)

  useEffect(() => {
    dispatch( getProductsAPI() )
  }, [props]);

So now your api call is happening through a redux action. The results are being saved to and read from the redux store, rather than from locally in the component. I haven't checked this code so it may need some tweaking / polishing, but this should give you an idea.