Почему fetchIntercept.register нажимает только один раз при нажатии кнопки в шаблоне redux-saga?

Question

Я использую fetch-intercept для перехвата всех http-запросов в приложении реагирования.Я добавил загрузчик в компонент приложения и показываю / скрываю загрузчик на основе полученного запроса / ответа.Он работает нормально, но когда я нажимаю кнопку во второй раз, чтобы вызвать выборку внутри файла саги, он не запускает метод запроса внутри выборочного перехватчика.

interceptor.js

    import fetchIntercept from 'fetch-intercept';
    import createstore from './store';
    const unregister = fetchIntercept.register({
    request: function (url, config) {

        // Modify the url or config here
        let withDefaults = Object.assign({}, config);
        withDefaults.headers = withDefaults.headers || new Headers({
            'AUTHORIZATION': `Bearer shikhabwehfbwefbffbweufwfwf`
        });

        // call to action to show spinner
        createstore.dispatch({
            type: 'SET_LOADER',
            loading: true
        });

        return [url, withDefaults];
    },

    requestError: function (error) {
        createstore.dispatch({
            type: 'SET_LOADER',
            loading: false,
            error: error
        });
        // Called when an error occured during another 'request' interceptor call
        return Promise.reject(error);
    },

    response: function (response) {

        // Modify the reponse object
        createstore.dispatch({
            type: 'SET_LOADER',
            loading: false
        });
        return response;
    },

    responseError: function (error) {
        createstore.dispatch({
            type: 'SET_LOADER',
            loading: false,
            error: error
        });
        // Handle an fetch error
        return Promise.reject(error);
    }
});

export default unregister;

Saga.js

export function* fetchNews() {
  try {
    const json = yield fetch('https://randomuser.me/api/?results=10').then(results => {
    return results.json();
    });

    unregister();

    yield put({
      type: "NEWS_RECEIVED",
      json: json.results
    });

  } catch (error) {
      yield put({type: "NEWS_RECIEVED_ERROR", error});
  }
}

// watcher
export function* getNewsActionWatcher() {
  yield takeLatest('GET_NEWS', fetchNews); // action , worker
}


export default function* rootSaga() {
  yield all([getNewsActionWatcher()]);
}

Component.ts

import React from 'react';
import { connect } from 'react-redux'
import { getNews } from '../../actions';

const ButtonComponent = ({ getNews }) => (
    <button onClick={getNews}>Get News</button>
);

const mapDispatchToProps = {
    getNews: getNews
};

const GetButton = connect(null, mapDispatchToProps)(ButtonComponent);
export default GetButton;

Может кто-нибудь помочь мне с этой проблемой?

Answer 1

Вам нужно использовать dispatch в mapDispatchToProps, чтобы отправить действие GET_NEWS.

const mapDispatchToProps = (dispatch) => {
    getNews: () => dispatch(getNews())
};

Еще один случай: takeLatest в getNewsActionWatcher будет запускать только одну разветвленную задачу ввремя.Убивая предыдущее задание, как только получено другое действие GET_NEWS.

Поэтому использование all эффекта в rootSaga() нецелесообразно.