title: Redux saga function is not being called
body: <p>I tried to use redux-saga in my React project, but redux-saga function is not being called. <code>toggleLoginModal</code> action in <code>access.actions.js</code> is called, but <code>toggleLoginModal</code> in <code>access.sagas.js</code> is not called.</p>
  
  <p><strong>Header.jsx</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { withRouter } from 'react-router';
  import accessActions from 'actions/access.actions';
  import { connect } from 'react-redux';
  import './Header.scss';
  
  const { toggleLoginModal, toggleRegisterModal } = accessActions;
  
  class Header extends Component {
    handleLoginClick = () =&gt; {
      toggleLoginModal(true);
    };
  
    render() {
      return (
          &lt;div className="navbar-right"&gt;
              &lt;button type="button" className="btn btn-link" onClick={this.handleLoginClick}&gt;Log in&lt;/button&gt;
              &lt;button type="button" className="btn btn-primary"&gt;Register&lt;/button&gt;
          &lt;/div&gt;
      );
    }
  }
  
  export default withRouter(connect(null, { toggleLoginModal, toggleRegisterModal })(Header));
  </code></pre>
  
  <p><strong>access.action.js</strong></p>
  
  <pre><code>const actions = {
    TOGGLE_LOGIN_MODAL: 'TOGGLE_LOGIN_MODAL',
    TOGGLE_LOGIN_MODAL_RETURN: 'TOGGLE_LOGIN_MODAL_RETURN',
    toggleLoginModal: newState =&gt; ({
      type: actions.TOGGLE_LOGIN_MODAL,
      state: newState,
    }),
    toggleLoginModalReturn: (newState) =&gt; {
      return (dispatch) =&gt; {
        dispatch({
          type: actions.TOGGLE_LOGIN_MODAL_RETURN,
          newState,
        });
      };
    },
  };
  export default actions;
  </code></pre>
  
  <p><strong>access.sagas.js</strong></p>
  
  <pre><code>import { all, takeEvery, put } from 'redux-saga/effects';
  import actions from 'actions/access.actions';
  
  export function* toggleLoginModal({ state }) {
    yield put(actions.toggleLoginModalReturn(state));
  }
  
  export default function* rootSaga() {
    yield all([
      takeEvery(actions.TOGGLE_LOGIN_MODAL, toggleLoginModal),
    ]);
  }
  </code></pre>
  
  <p><strong>access.reducers.js</strong></p>
  
  <pre><code>export function toggleModals(state = { login: false, register: false }, action) {
    switch (action.type) {
      case 'TOGGLE_LOGIN_MODAL_RETURN':
        return { login: action.newState };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p><strong>reducers.js</strong></p>
  
  <pre><code>import { toggleModals } from 'state/access.reducers.js';
  
  export default {
    toggleModals,
  };
  </code></pre>
  
  <p><strong>sagas.js</strong></p>
  
  <pre><code>import { all } from 'redux-saga/effects';
  import accessSagas from 'sagas/access.sagas';
  
  export default function* rootSaga() {
    yield all([accessSagas()]);
  }
  </code></pre>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import createHistory from 'history/createBrowserHistory';
  import { createStore, combineReducers, applyMiddleware } from 'redux';
  import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
  import { Provider } from 'react-redux';
  import createSagaMiddleware from 'redux-saga';
  import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
  
  import App from 'App';
  import reducers from 'reducers';
  import sagas from 'sagas';
  
  const history = createHistory();
  const sagaMiddleware = createSagaMiddleware();
  
  const store = createStore(
    combineReducers({
      ...reducers,
      router: routerReducer,
    }),
    composeWithDevTools(applyMiddleware(
      routerMiddleware(history),
      sagaMiddleware,
    )),
  );
  
  sagaMiddleware.run(sagas);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;App /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById('app'),
  );
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"dependencies": {
      "bootstrap": "^4.1.1",
      "jquery": "^3.3.1",
      "js-cookie": "^2.2.0",
      "lodash": "^4.17.10",
      "moment": "^2.22.1",
      "popper.js": "^1.14.3",
      "react": "^16.3.2",
      "react-dom": "^16.3.2",
      "react-loadable": "^5.4.0",
      "react-modal": "^3.4.4",
      "react-redux": "^5.0.7",
      "react-router": "^4.2.0",
      "react-router-dom": "^4.2.2",
      "react-router-redux": "^5.0.0-alpha.9",
      "react-tippy": "^1.2.2",
      "react-toastify": "^4.0.1",
      "redux": "^4.0.0",
      "redux-saga": "^0.16.0"
    },
  </code></pre>