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 fetch返回数据，所以在商店数据中是未定义的。如何解决这个问题？

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, ...)语句才会阻止。由于未返回提取承诺，FetchData将继续执行，AppData将不确定。通过返回promise，FetchData将阻塞，直到promise被解决或拒绝，AppData或catch将按预期工作。

与Redux-Saga异步

2 个答案: