title: React hooks: dispatch action from useEffect
body: <p>My folder structure:</p>
  
  <pre><code>|--App
    |--Components
      |--PageA.js
      |--PageB.js
      |--PageC.js
    |--common-effects
      |--useFetching.js
  </code></pre>
  
  <p>I am refactoring my code to fetch data from API, using react <a href="https://reactjs.org/docs/hooks-intro.html" rel="noreferrer">hooks</a>.
  I want to dispatch an action from <strong>useEffect</strong> in <em>useFetching.js</em> that is intercepted by <strong>saga</strong> middleware. The action should be dispatched only when the components(<em>PageA</em>, <em>PageB</em>, <em>PageC</em>) mount.</p>
  
  <p>I am using <strong>redux</strong>, <strong>react-redux</strong> and <strong>redux-saga</strong>.</p>
  
  <p><em>PageA.js</em>:</p>
  
  <pre><code>function(props) {
    useFetching(actionParams)
    //....//
  }
  </code></pre>
  
  <p>Similar code for <em>PageB</em> and <em>PageC</em> components. </p>
  
  <p>I have abstracted the reusable code to fetch data in <code>useFetching</code> <em>Custom hook</em>.</p>
  
  <p><em>useFetching.js</em></p>
  
  <pre><code>const useFetching = actionArgs =&gt; {
    useEffect( () =&gt; {
      store.dispatch(action(actionArgs)); // does not work
    })
  }
  </code></pre>
  
  <p>I don't know how to access redux <code>dispatch</code> in <em>useFetching</em>. I tried it with <code>useReducer</code> effect, but the sagas missed the action.</p>