Question

因此，基本上，我有一个操作，该操作是在Button单击时分派的。这是我的传奇：

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

Answer 1

您的takeLatest：

takeLatest(TYPES.FETCH_NEWS, callingAPItoFetchNews)

对您put采取的行动有反应：

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

您应该使用或不同的名称，或使用take代替（并使用循环的解决方案在首先处理事件后捕获事件）。

Answer 2

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

调度单个操作后，redux-saga垃圾邮件出现新请求

2 个答案: