Can't receive data from API in React Native using Redux-saga as my middleware

Question

I am making a get request from my API (Django REST framework) and this returns data (name,img of products). I am using Redux-saga as my middleware in React-Native with Redux. However, I can't seem to receive the data.

Here is my action for the get request:

export function getProductList() {
    type:GET_PRODUCTS_LIST
}

And as well here is my api.js file:

const urlGetProducts = 'https://hero-pregbackend.herokuapp.com/shop/';
const urlOrderUltrascan = 'https://hero-pregbackend.herokuapp.com/ultrascan/order_scan/';

export const getProductsFromApi = function* (){
    const response = yield fetch(urlGetProducts, {
        method:'GET',
        headers:{
            'Accept':'application/json, application/xml, text/plain, text/html, *.*',
            // 'Content-Type':'application/json',
        },
        body: '',
    });
    const products = yield response.status === 200 ? response.json():[]
    return products;
}

export const Api = {
    getProductsFromApi,
}

My sagas file:

import {GET_PRODUCTS_LIST,GET_PRODUCTS_ERROR} from '../actions/products';
import {ULTRASCAN_SUCCESS,ULTRASCAN_FAIL} from '../actions/ultrascan';
import { takeEvery, call, put, select,takeLatest} from 'redux-saga/effects';
import {Api} from './api';


function* fetchProducts(){
    try {
        const receivedProducts = yield Api.getProductsFromApi();
        yield put({type:GET_PRODUCTS_LIST,receivedProducts:receivedProducts})
    }catch(error){
        yield put({type:GET_PRODUCTS_ERROR,error});
    }
}

export function* productSaga(){
    yield takeEvery(GET_PRODUCTS_LIST,fetchProducts);
}

My reducer for the action:

import { GET_PRODUCTS_LIST,GET_PRODUCTS_ERROR,GET_PRODUCT_DETAILS,GET_DETAILS_ERROR} from '../actions/ultrascan';

const initialState = {
    productList: [],
    // productDetails:[],
    isFetching:false,
    error:null,
};

const productsReducer = (state = initialState,action) => {
    switch(action.type){
        case GET_PRODUCTS_LIST:
            return {
                ...state,
                // isFetching:true,
                productList:action.receivedProducts,
                isFetching:false,
            }
        case GET_PRODUCTS_ERROR:
            return {
                ...state,
                error:action.error
            }
        default:
            return state;
    }
}

export default productsReducer;

Answer 1

Change your action to pass the response

   export function getProductList(receivedProducts) {
    return {
            type: GET_PRODUCTS_LIST,
            receivedProducts
    }
   }

Also change your API response:

function* fetchProducts(){
    try {
        const receivedProducts = yield Api.getProductsFromApi();
        yield put(getProductList(receivedProducts))
    ....