Question

我在第一页上有一些列表，我想通过单击set request通过redux-saga获得单项，但是它在单击之前运行并返回undefined，并且不显示列表中第一个请求的响应。我想向请求的末尾传递一些信息，并返回该项目的详细信息。

Cards.js

    SetSlugItems(Items){
   this.props.onFetchArticle(Items.slug)
}
render(){
    console.log('this.props.articles.articles',this.props.articles.articles)
    return (
            <ContainerContent>
                <ContentHolder>
                    <CardHolderStyled >
        {this.props.articles.articles&&this.props.articles.articles.map((Items,index)=>{
                            return(
                                <Link  to={{ pathname: '/singleArticle', state: { index:index} }}  >
                                    <CardItemStyled key={index} onClick={()=>this.SetSlugItems(Items)} >

                                    </CardItemStyled>
                                </Link>
                            )})}
                    </CardHolderStyled>
                    <SideBar/>
                </ContentHolder>
            </ContainerContent>
        );}}

Action.js

 function fetchArticleAction (slug) {
    return {
        type: GET_SINGLE_ARTICLE,
        slug
    };
}
function getArticleSuccessSingle (receiveArticleSingle) {
    return {
        type: GET_SINGLE_ARTICLE_SUCCESS,
        receiveArticleSingle
    };
}
function getArticleFailureSingle () {
    return {
        type: GET_SINGLE_ARTICLE_FAILURE
    };
}

Saga.js

function* getArticleSingle (action) {
    try {
        const receiveArticleSingle = yield call[fetchArticleSingle(action.slug)] ;
        yield put(getArticleSuccessSingle(receiveArticleSingle));
    } catch (err) {
        yield put(getArticleFailureSingle());
    }
}
const fetchArticleSingle = (slug) => {
    return fetch('http://localhost:3000/api/articles/'+slug, {
       method:'GET',
        headers:{
            'Content-Type': 'application/json',
            'X-Requested-With':'XMLHttpRequest',
        }
    })
        .then(response => response.json())
};
function* watchGetArticle () {
    yield takeEvery(GET_ARTICLE, getArticle);
    yield takeEvery(GET_SINGLE_ARTICLE, getArticleSingle);
}

和Reducer.js

import {
    GET_SINGLE_ARTICLE_SUCCESS,
    GET_SINGLE_ARTICLE_FAILURE
} from '../constants';
const initialStateSingle = [];
const SingleArticleReducer = (stateSlug = initialStateSingle, action={}) => {
    switch (action.type) {
        case GET_SINGLE_ARTICLE_SUCCESS:
            return  action.receiveArticleSingle;
        case  GET_SINGLE_ARTICLE_FAILURE:
            return [];
        default:
            return stateSlug;

    }
};

export default SingleArticleReducer

Answer 1

call[fetchArticleSingle(action.slug)]

这正在访问call函数上的属性，而该属性为undefined。相反，您将要呼叫call，如下所示：

call(fetchArticleSingle, action.slug);

在redux saga中发送带有ID的获取请求

1 个答案: