與Redux-Saga異步

Question

我是Redux-saga的新手。 我有一個使用Redux-saga的項目，這是我的代碼：

// saga.js
function* FetchData() {
    try {
        const AppData = yield call(fetch_Data, "LOAD_APP", App_Url);
        yield put({ type: "LOAD_APP", data: AppData })
    } catch (error) {
        console.log(error)
    }
}

function* watchFetchAPI() {
         yield takeEvery("LOAD_ASYNC", FetchData)
}

export default function* rootSaga() {
    yield all([
        watchFetchAPI()
    ])
}

// action.js
export function fetch_Data(type, url) {
    fetch(url, {
        method: 'GET',
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        contentType: 'json'
    }).then(function (res) {
        if (res.ok) {
            return res.json();
        } else {
            console.log("Failed. type: " + type + " Url: " + url);
        }
    }).catch(function (e) {
        console.log("Failed. type: " + type + " Url: " + url);
        console.log(e)
    })
}

在我的組件調度動作中：

this.props.dispatch（{type：“ LOAD_ASYNC”}）}

和減速器：

  // pageReducer.js

    export function calc(state = [], action) {
        switch (action.type) {
            case "LOAD_APP":
                return [{ type: action.type, data: action.data }]
            default:
                return state;
        }
    }

// rootReducer.js
    import { combineReducers } from 'redux'
    import { calc } from './pageReducers'
    const Rootreducers = combineReducers(
        {
            data: calc
        }
    )
    export default Rootreducers

重新呈現頁面之前我沒有數據。 我正在調試，看到我的api在重新渲染頁面后獲取了返回數據，因此存儲數據中的undefined。 如何解決呢？

Answer 1

您的fetch_Data沒有返回提取結果

Answer 2

問題出在fetch_Data 。 您應該返回通過fetch返回的Promise，如下所示：

// action.js
export function fetch_Data(type, url) {
  return fetch(...).then(...).catch(...)
}

您的yield call(fetch_Data, ...)語句僅在返回promise時才會阻塞。 由於未返回獲取承諾，因此FetchData繼續執行，並且AppData將未定義。 通過返回承諾， FetchData將阻塞，直到承諾被解決或拒絕，並且AppData或catch將按預期工作。