Спам запросов в redux-saga
При таком коде с redux-saga идет спам get запросов. Вместо одного их очень много
reducer.js:
const initialState = {
popularVideos: [],
};
const videosReducer = (state = initialState, action) => {
switch (action.type) {
case POPULAR_VIDEOS_LIST: {
return {
...state,
popularVideos: action.popularVideos,
}
}
default:
return state
}
};
export const getPopularVideosListAC = (popularVideos) => {
return {type: POPULAR_VIDEOS_LIST, popularVideos}
};
saga.js:
function getData() {
return api.getPopularVideosList()
.then(res => {
res.data.items.map(item => {
let urlImage = `https://www.youtube.com/embed/${item.id}?controls=2`;
return <div className="item-wrapper" key={item.id}>
<li className="title-popular-video">
<div className="wrapper-title-video"><span> {item.snippet.title} </span></div>
<iframe width="300" height="200" src={urlImage} frameBorder="0" title="myFrame"></iframe>
<div className="views"> views: {item.statistics.viewCount} </div>
<div className="statistics">
<div> like: {item.statistics.likeCount} </div>
<div> dislike: {item.statistics.dislikeCount} </div>
</div>
</li>
</div>
});
})
}
function* workerLoadData() {
let data = yield call(getData)
yield put(getPopularVideosListAC(data))
}
export function* watchLoadData() {
yield takeEvery(POPULAR_VIDEOS_LIST, workerLoadData)
}
api.js:
import axios from "axios";
const API_KEY = "----------------";
const instance = axios.create({
baseURL: `https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=5&key=${API_KEY}`
});
export const api = {
getPopularVideosList() {
return instance.get("", {})
},
};
store.js:
const sagaMiddleware = createSagaMiddleware();
const rootReducer = combineReducers({
news: newsReducer,
videos: videosReducer,
found_videos: foundVideosReducer
});
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchLoadData);
export default store;