与Redux-Saga异步

Question

I'm newbie of Redux-saga. I have a project using Redux-saga, and this is my snip code:

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

In my component dispatch action :

this.props.dispatch({ type: "LOAD_ASYNC"})}

And reducers :

  // 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

I don't get data before page re-render. I'm debug and see my api fetch return data after my page re-render , so in store data is undefined . How to resolve this ?

Answer 1

您的fetch_Data没有返回提取结果

Answer 2

The problem is in fetch_Data . You should return the Promise returned by fetch like so:

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

Your yield call(fetch_Data, ...) statement will only block if a promise is returned. Because the fetch promise is not returned, FetchData continues on with execution and AppData will be undefined. By returning the promise, FetchData will block until the promise resolved or rejected and AppData or catch will work as expected.