спам редукс-сага с новыми запросами после отправки одного действия - PullRequest
Новая
       66

спам редукс-сага с новыми запросами после отправки одного действия

0 голосов
/ 21 сентября 2018

Итак, в основном у меня есть действие, которое я отправляю по нажатию кнопки.Вот моя сага: 

import * as TYPES from '../types';
import { call, put, takeLatest} from 'redux-saga/effects';

const url = `someApiUrl`;


const api = link => fetch(link, {
   method: 'GET'
}).then(res => res.json());

function* callingAPItoFetchNews (action) {
     try {
       const response = yield call(api, url);
       yield put({type: TYPES.FETCH_NEWS, payload: response});
     } catch (e) {
       yield put({type: TYPES.FETCH_NEW_FAILED});
     }
}


export default function* watcherSaga () {
    yield takeLatest(TYPES.FETCH_NEWS, callingAPItoFetchNews)
}

, а вот моя корневая сага: 

import { takeEvery, all, takeLatest, fork } from 'redux- saga/effects';
import * as TYPES from '../types';
import callingAPItoFetchNews  from '../sagas';

function* mySaga() {
    yield all ([
        fork(callingAPItoFetchNews)
    ])
}

export default mySaga;

После отправки действия я вижу, что каждый запрос на выборку заполняется каждую секунду.Само действие выглядит примерно так: 

export const fetchNews = () => ({type: TYPES.FETCH_NEWS});

. Вот как я проверяю данные, которые возвращаются в основном: 

componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        if (nextProps.dataLoaded !== undefined) {
            const articles = nextProps.dataLoaded.articles;
            const totalResults = nextProps.dataLoaded.totalResults;

            console.log('-----SEPARATION START-------');
            console.log(articles);
            console.log('-------SEPARATION END--------')
        }

    }

Вот мой взгляд, где я подключаю приложение с помощью redux и отправляюдействие: 

import React, { Component } from 'react';
import {
View,
Text,
Button,
ScrollView,
TouchableOpacity
} from 'react-native';
import { connect } from 'react-redux'
import { fetchNews } from './actions'
import { Ionicons } from '@expo/vector-icons'
import NavStack from './navigation';
import s from './styles';

class MainView extends React.PureComponent {

componentWillReceiveProps(nextProps) {
    if (nextProps.dataLoaded !== undefined) {
        const articles = nextProps.dataLoaded.articles;
        const totalResults = nextProps.dataLoaded.totalResults;

       console.log('-----SEPARATION START-------');
       console.log(articles);
       console.log('-------SEPARATION END--------')
    }

}

render() {
    return (
        //<NavStack/>
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <Button 
                title='Click me to fetch data'
                onPress={() => {
                    this.props.fetchNewsData();
                }}
            />
        </View>
        );
    }
}



mapStateToProps = state => ({
    dataLoaded: state.fetchNews.news
});

mapDispatchToProps = dispatch => ({
    fetchNewsData: () => dispatch(fetchNews())
});

export default connect(mapStateToProps, mapDispatchToProps)(MainView);

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018 
import * as TYPES from '../types';
import { call, put, takeLatest} from 'redux-saga/effects';

const url = `someApiUrl`;


const api = link => fetch(link, {
   method: 'GET'
}).then(res => res.json());

function* callingAPItoFetchNews (action) {
     try {
       const response = yield call(api, url);
       yield put({type: TYPES.FETCH_NEWS, payload: response});
     } catch (e) {
       yield put({type: TYPES.FETCH_NEW_FAILED});
     }
}


export default function* watcherSaga () {
    yield takeLatest(TYPES.FETCH_NEWS, callingAPItoFetchNews)
}

Из-за кода выше,

Вы видите, что ваш код выполняет действие TYPES.FETCH_NEWS и вызывает API.

Это проблема, когда вы также отправляете то же действиеTYPES.FETCH_NEWS при получении ответа от API по этой строке yield put({type: TYPES.FETCH_NEWS, payload: response});.

Для решения проблемы стандартным способом вместо этого следует использовать новый тип действия для ответа API.yield put({type: TYPES.FETCH_NEWS_SUCCESS, payload: response});

0 голосов
/ 23 сентября 2018

Ваш takeLatest: 

takeLatest(TYPES.FETCH_NEWS, callingAPItoFetchNews)

реагирует на действие, которое вы put: 

yield put({type: TYPES.FETCH_NEWS, payload: response});

Вы должны использовать или другое имя или использоватьtake вместо (и создать решение с циклом для перехвата события после первой обработки).

...