title: Why fetchIntercept.register hits only once on button click in redux-saga pattern?
body: <p>I am using fetch-intercept to intercept all the http-requests in a react application. I added a loader in the app component and show/hide loader on the basis of request/response recieved. Its working fine but when I click the button second time to call the fetch inside saga file, it is not hitting request method inside fetch interceptor.</p>
  
  <p><strong>interceptor.js</strong></p>
  
  <pre><code>    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;
  </code></pre>
  
  <p><strong>Saga.js</strong></p>
  
  <pre><code>export function* fetchNews() {
    try {
      const json = yield fetch('https://randomuser.me/api/?results=10').then(results =&gt; {
      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()]);
  }
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux'
  import { getNews } from '../../actions';
  
  const ButtonComponent = ({ getNews }) =&gt; (
      &lt;button onClick={getNews}&gt;Get News&lt;/button&gt;
  );
  
  const mapDispatchToProps = {
      getNews: getNews
  };
  
  const GetButton = connect(null, mapDispatchToProps)(ButtonComponent);
  export default GetButton;
  </code></pre>
  
  <p>Could anyone please help me out with this issue ?</p>