title: Dispatched Action not reaching Saga
body: <p>I was trying to load an image in this basic app using Saga, i configured Saga and it seems fine but the image wasn't getting loaded. So I even created abutton to check whether saga is getting called, but it's still not working.</p>
  <p>index.js(saga)</p>
  <pre><code>import { put, takeLatest, fork, all, takeEvery } from &quot;redux-saga/effects&quot;;
  
  const image = [&quot;/Users/anirudhk/Desktop/PBS/src/favicon.ico&quot;];
  
  function* loadImagesSaga() {
    debugger;
    yield put({ type: &quot;LOAD_IMAGES_SUCCESS&quot;, data: image });
  }
  
  function* loadImages() {
    debugger;
    yield takeEvery(&quot;LOAD_IMAGES&quot;, loadImagesSaga);
  }
  
  export default function* rootSaga() {
    yield all([loadImages()]);
  }
  
  </code></pre>
  <p>store.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import { BrowserRouter as Router } from &quot;react-router-dom&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import App from &quot;./components/App&quot;;
  import &quot;./index.css&quot;;
  import configureStore from &quot;./redux/configureStore&quot;;
  import { createStore, applyMiddleware, compose } from &quot;redux&quot;;
  import rootReducer from &quot;./redux/reducers/index&quot;;
  import createSagaMiddleware from &quot;redux-saga&quot;;
  import &quot;regenerator-runtime/runtime&quot;;
  import rootSaga from &quot;./redux/saga/index&quot;;
  import { Provider as ReduxProvider } from &quot;react-redux&quot;;
  
  // const store = configureStore();
  
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
  
  const sagaMiddleware = createSagaMiddleware();
  
  const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(sagaMiddleware))
  );
  
  sagaMiddleware.run(rootSaga);
  
  render(
    &lt;ReduxProvider store={store}&gt;
      &lt;Router&gt;
        &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/ReduxProvider&gt;,
    document.getElementById(&quot;app&quot;)
  );
  
  
  </code></pre>
  <p>Actions.js</p>
  <pre><code>export function loadImages() {
    debugger;
    return { type: &quot;LOAD_IMAGES&quot; };
  }
  
  </code></pre>
  <p>homepage.js</p>
  <pre><code>import React, { useEffect, useReducer } from &quot;react&quot;;
  import { loadImages } from &quot;../../redux/actions/actions&quot;;
  import imagesReducer from &quot;../../redux/reducers/imagesReducer&quot;;
  
  function HomePage() {
    const [images, dispatch] = useReducer(imagesReducer, []);
  
    // useEffect(() =&gt; {
    //   dispatch(loadImages());
    // }, []);
  
    return (
      &lt;div className=&quot;jumbotron&quot;&gt;
        &lt;h1&gt;Bag&lt;/h1&gt;
        &lt;button onClick={() =&gt; dispatch(loadImages())}&gt;Click&lt;/button&gt;
        {images.map((image) =&gt; (
          &lt;img
            src={image.src}
            key={image.src}
            style={{ height: &quot;100px&quot;, width: &quot;100px&quot; }}
          &gt;&lt;/img&gt;
        ))}
      &lt;/div&gt;
    );
  }
  
  export default HomePage;
  
  </code></pre>
  <p>LoadImages and loadImagesSaga doesn't get called</p>