Reactjs redux saga在发送单个操作后向新请求发送垃圾邮件

所以，基本上，我有一个动作，在点击按钮时发送。 以下是我的传奇故事：

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);

import React，{Component}来自'React'；
进口{
看法
文本，
按钮
滚动视图，
可触摸不透明度
}从“反应本机”；
从“react redux”导入{connect}
从“./actions”导入{fetchNews}
从“@expo/vector icons”导入{Ionicons}
从“/navigation”导入导航堆栈；
从“./styles”导入s；
类MainView扩展了React.PureComponent{
组件将接收道具（下一步）{
如果（nextrops.dataLoaded！==未定义）{
const articles=nextrops.dataLoaded.articles；
const totalResults=nextrops.dataLoaded.totalResults；
log（'----分离开始-----'）；
控制台日志（文章）；
console.log（'----分离结束-----'）
}
}
render（）{
返回(
//
{
this.props.fetchNewsData（）；
}}
/>
);
}
}
mapStateToProps=状态=>({
数据加载：state.fetchNews.news
});
mapDispatchToProps=调度=>({
fetchNewsData:（）=>dispatch（fetchNews（））
});
导出默认连接（MapStateTrops、mapDispatchToProps）（主视图）；

您的

使用最新的
：

takeLatest(TYPES.FETCH_NEWS, callingAPItoFetchNews)

正在对您
执行的操作作出反应
：

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

您应该使用或不同的名称，或者使用
take
（并使用循环生成解决方案，以便在第一次处理后捕获事件）

因为上面的代码

您可以看到您的代码采用
类型。获取新闻
操作并调用api

当您通过这行
接收到来自api的响应时，也会调度相同的操作
TYPES.FETCH\u NEWS
，这就是问题所在
yield put（{type:TYPES.FETCH\u NEWS，payload:response}）

要用标准方法解决此问题，您应该为api响应使用新的操作类型
yieldput（{type:TYPES.FETCH\u NEWS\u SUCCESS，payload:response}）
您如何/在哪里发送您的邮件action@imjared添加的组件
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)
}