無法使用 Redux-saga 作為我的中間件在 React Native 中接收來自 API 的數據

Question

我正在從我的 API（Django REST 框架）發出獲取請求，這將返回數據（產品名稱、img）。 我在 React-Native 和 Redux 中使用 Redux-saga 作為我的中間件。 但是，我似乎無法接收數據。

這是我對獲取請求的操作：

export function getProductList() {
    type:GET_PRODUCTS_LIST
}

這也是我的 api.js 文件：

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

我的傳奇文件：

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

我的行動減速器：

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

更改您的操作以傳遞響應

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

還要更改您的 API 響應：

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