title: Is it idiomatic use of redux-saga to call a worker saga directly from a React component?
body: <p>I am using <code>redux-saga</code> having spent some time on core concepts of generators, generators with promises, and redux-saga itself. What I want below is to understand what is idiomatic and recommended, and what isn't.</p>
  
  <p>In one file I define my root saga, watcher saga, and one worker saga (<code>fetchSupplierOrders</code>).</p>
  
  <pre><code>import {
      fetchSupplierOrders,
  } from './supplierOrders';
  import { takeLatest} from 'redux-saga/effects';
  
  function* watchSupplierOrdersSagas() {
      yield takeLatest('REQUEST_FETCH_SUPPLIER_ORDERS', fetchSupplierOrders);
  }
  
  export default function* rootSaga() {
      yield all([watchSupplierOrdersSagas()]);
  }
  </code></pre>
  
  <p>Here is the worker saga:</p>
  
  <pre><code>export function* fetchSupplierOrders() {
      try {
          const supplierOrders = yield call(getSupplierOrders);  // API call is in getSupplierOrders
          // normally here I would use redux-saga put to hit my redux reducers
          yield supplierOrders.map(({ id }) =&gt; id)
      } catch (error) {
          yield put({ type: 'RECEIVE_ERROR_FETCH_SUPPLIER_ORDERS', error: error.message });
      }
  }
  </code></pre>
  
  <p>I have a React component that when I click a button, it executes the worker saga. What I am trying to do here is to not go through the redux-saga watcher saga at all. I will simply execute the generator function myself in the component, and iterate through it. Usually, I would go through the watcher saga, and it would call a worker saga that would generate side effects by modifying redux state.</p>
  
  <p>However, what if I want to make a network request, but I don't want to save the result in redux, but in local component state? I want the component to somehow get the results from the worker saga directly.</p>
  
  <p>Here is the click handler for the button in the React component:</p>
  
  <pre><code>    const handleFetchSuppliers = event =&gt; {
          const it = fetchSupplierOrders({ payload: event.target.value });
          const res1 = await it.next().value;
          console.log('res1', res1);
          const res2 = it.next(res1);
          console.log('res2', res2);
  </code></pre>
  
  <p>This code will not work, because in the worker saga I am using <code>redux-saga</code>'s <code>call</code> function. If I remove the use of <code>call</code>, and call <code>getSupplierOrders</code> (an async function) directly, then the await works and all the correct values are console.logged.</p>
  
  <p>Is it common to do this (executing a worker saga from a component to get the results of an API request)? But if I do it this way then I lose the benefit of using call (isn't this useful because it's easier to test?)</p>
  
  <p>Before <code>redux-saga</code> I would simply dispatch a thunk using <code>redux-thunk</code>, which is basically using <code>async/await</code> all the way through.</p>
  
  <p>Do people mix the use of <code>redux-thunk</code> and <code>redux-saga</code>? Is this frowned upon?</p>