send get request with id in redux saga - reactjs

Question

I have some list on the first page and I want to by click set Request to get single items by redux-saga but it's run before click and return undefined and not show the response of the first request of list. I want to pass some slug to the end of the request and return details of the item.
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);
}
and 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)]
This is accessing a property on the call function, and that property is undefined. Instead you'll want to call call, as in:
call(fetchArticleSingle, action.slug);