title: Reducer not updating state on action being fired and hence redux store/state not being updated
body: <p>Actions fired from mediaSagas.js not entering the reducer function and hence reducer store/state not being updated.
  I have tried debugging but not able to find the root cause.</p>
  
  <p>actionTypes.js </p>
  
  <pre><code>export const FLICKR_IMAGES_SUCCESS = 'FLICKR_IMAGES_SUCCESS';
  export const SHUTTER_VIDEOS_SUCCESS = 'SHUTTER_VIDEOS_SUCCESS';
  </code></pre>
  
  <p>imageReducer.js</p>
  
  <pre><code>import initialState from './initialState';
  import * as types from '../constants/actionTypes';
  
  export default function (state = initialState.images, action) {
    console.log("action",action); // I am not getting action with type FLICKR_IMAGES_SUCCESS or SHUTTER_VIDEOS_SUCCESS
    switch (action.type) {
      case types.FLICKR_IMAGES_SUCCESS:
        return [...state, action.images];
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>videoReducer.js</p>
  
  <pre><code>import initialState from './initialState';
  import * as types from '../constants/actionTypes';
  
  export default function (state = initialState.videos, action) {
    console.log("action",action); // I am not getting action with type FLICKR_IMAGES_SUCCESS or SHUTTER_VIDEOS_SUCCESS
    switch (action.type) {
      case types.SHUTTER_VIDEOS_SUCCESS:
        return [...state, action.videos];
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>initialState.js</p>
  
  <pre><code>export default {
    images: [],
    videos: []
  };
  </code></pre>
  
  <p>mediaSagas.js</p>
  
  <pre><code>import { put, call } from 'redux-saga/effects';
  import { unsplashImages, shutterStockVideos } from '../Api/api';
  import * as types from '../constants/actionTypes';
  
  
  export default function* searchMediaSaga({ payload }) {
    console.log("saga entered");
    try {
      const videos = yield call(shutterStockVideos, payload);
      const images = yield call(unsplashImages, payload);
      console.log("vids",videos); // I am getting the videos data here
      console.log("img",images); // I am getting the image data here
      yield [
        put({ type: types.SHUTTER_VIDEOS_SUCCESS, videos }),
        put({ type: types.FLICKR_IMAGES_SUCCESS,images}),
      ];
    } catch (error) {
      console.log("err",error);
      yield put({ type: 'SEARCH_MEDIA_FAILURE', error });
    }
  }
  </code></pre>
  
  <p>watchers.js</p>
  
  <pre><code>import { takeLatest } from 'redux-saga/effects';
  import  searchMediaSaga  from './mediaSagas';
  import * as types from '../constants/actionTypes';
  
  // Watches for SEARCH_MEDIA_REQUEST action type asynchronously
  export default function* watchSearchMedia() {
    yield takeLatest(types.SEARCH_MEDIA_REQUEST, searchMediaSaga);
  }
  </code></pre>
  
  <p>reducers/index.js</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import images from './imageReducer';
  import videos from './videoReducer';
  
  const rootReducer = combineReducers({
    images, 
    videos
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>sagas/index.js</p>
  
  <pre><code>import { fork } from 'redux-saga/effects';
  import watchSearchMedia from './watchers';
  
  export default function* startForman() {
    yield fork(watchSearchMedia);
  }
  </code></pre>
  
  <p>configureStore.js</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import createSagaMiddleware from 'redux-saga';
  import rootReducer from '../reducers/index';
  import rootSaga from '../sagas'; // TODO: Next step
  
  const configureStore = () =&gt; {
    const sagaMiddleware = createSagaMiddleware(); 
    return {
      ...createStore(rootReducer,
        applyMiddleware(sagaMiddleware)),
      runSaga: sagaMiddleware.run(rootSaga)
    };
  };
  
  export default configureStore;
  </code></pre>
  
  <p>src/index.js</p>
  
  <pre><code>import ReactDOM from 'react-dom';
  import React from 'react';
  import {
    BrowserRouter as Router,
    Route,
    Switch
  } from "react-router-dom";
  import { Provider } from 'react-redux';
  import configureStore from './store/configureStore';
  import App from './containers/App'
  import MediaGalleryPage from './containers/MediaGalleryPage'
  
  const store = configureStore();
  store.subscribe(() =&gt; {
    const newState = store.getState();
    // check out your updated state
    console.log("NewState", newState) // always giving empty image and video arrays
  });
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router&gt;
        &lt;Switch&gt;  
          &lt;Route exact path="/" component={App} /&gt;
          &lt;Route path="/library" component={MediaGalleryPage} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;, document.getElementById('root')
  );
  </code></pre>