title: Redux saga not calling the API
body: <p>I am trying to use redux-saga to call my API and passing it a parameter. I am using <code>redux-logger</code> and <code>console.log()</code> to debug. But it seems that my saga doesn't go call the API for some reason.</p>
  
  <p>Here is the console log of the states... as you can see the <code>apiMsg</code> doesnt change, however I have it change for each action.</p>
  
  <p><a href="https://i.stack.imgur.com/zEeyq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zEeyq.png" alt="enter image description here"></a></p>
  
  <p>I think I am going wrong somewhere in the actions, reducer or the component. Or else I am calling the API wrong in the Saga.</p>
  
  <p>This is my code</p>
  
  <p>api.js</p>
  
  <pre><code>import axios from 'axios';
  
  export function getPostApi(postId){
    return axios.get(
      `https://jsonplaceholder.typicode.com/posts/${postId}`
    ).then(
      response =&gt; {
        return response;
      }
    ).catch(
      err =&gt; {throw err;}
    );
  }
  </code></pre>
  
  <p>my store</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import createSagaMiddleware from 'redux-saga'
  import {createLogger} from 'redux-logger';
  import rootReducer from '../Reducers';
  
  export default function configureStore(initialState) {
    const sagaMiddleware = createSagaMiddleware();
    const logger = createLogger();
    return {
      ...createStore(rootReducer, initialState, applyMiddleware(sagaMiddleware, logger)),
      runSaga: sagaMiddleware.run
    }
  }
  </code></pre>
  
  <p>the saga</p>
  
  <pre><code>import {call, put, takeEvery} from 'redux-saga/effects';
  import * as service from '../Services/api';
  import * as actions from '../Actions';
  import * as types from '../actions/actionTypes';
  
  export function* fetchPost(action){
    try{
      yield put(actions.apiRequest());
      const [post] = yield [call(service.getPostApi, action.postId)];
      yield put(actions.apiRequestSucceeded(post));
    } catch(e){
      yield put(actions.apiRequestFailed());
    }
  }
  
  export function* watchApiRequest() {
    yield takeEvery(types.FETCH_POST, fetchPost);
  }
  </code></pre>
  
  <p>actions</p>
  
  <pre><code>import * as types from './actionTypes';
  
  export const fetchPost = (postId) =&gt; ({
    type: types.FETCH_POST,
    postId,
  });
  
  export const apiRequest = () =&gt; {
    return {
      type: types.API_REQUEST
    }
  }
  
  export const apiRequestSucceeded = (post) =&gt; {
    return {
      type: types.API_REQUEST_SUCCEEDED,
      post
    }
  }
  
  export const apiRequestFailed = () =&gt; {
    return {
      type: types.API_REQUEST_FAILED
    }
  }
  </code></pre>
  
  <p>reducer</p>
  
  <pre><code>import * as types from '../actions/actionTypes';
  
  const initialState = {
    apiMsg: '',
    postId: 1,
    fetching: false,
    post: null
  };
  
  export default function getPostData(state = initialState, action) {
    switch (action.type) {
      case types.API_REQUEST:
        return {
          ...state,
          apiMsg: 'API call request!',
          fetching: true
        }
      case types.API_REQUEST_SUCCEEDED:
        return {
          ...state,
          apiMsg: 'API called succeeded!',     
          fetching: false,
          postId: action.post.id,
          post: action.title
        };
      case types.API_REQUEST_FAILED:
        return {
          ...state,
          apiMsg: 'API called failed!',
          fetching: false,
        };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>the component page</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text} from 'react-native';
  import { connect } from 'react-redux';
  import {fetchPost} from './Actions/apiTesterActions';
  
  class TestPage extends Component {
    constructor() {
      super();
    }
  
    componentDidMount() {
      this.props.fetchPost(1)
    }
  
     render() {
      const { postId, fetching, post } = this.props;
      console.log('Test page props', postId, fetching, post);
      return (
        &lt;View&gt; 
          &lt;Text&gt;Test Page Works! &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      postId: state.getPostData.postId,
      fetching: state.getPostData.fetching,
      post: state.getPostData.post
    }
  };
  
  export default connect(mapStateToProps, {fetchPost})(TestPage);
  </code></pre>
  
  <p>I am still learning Redux, and now redux-saga, so I don't fully understand the structure/hierarchy, but I am learning and any advice is helpful. Thank you</p>
  
  <p><strong>EDIT:</strong>
  I am using this <a href="https://github.com/jinhoyim/react-redux-saga-ajax-tutorial/tree/master/src" rel="nofollow noreferrer">redux saga api call example</a> as a guide.</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import { Provider } from 'react-redux';
  import configureStore from './ReduxTest/Store/configureStore';
  import rootSaga from './ReduxTest/sagas';
  
  const store = configureStore();
  store.runSaga(rootSaga)
  
  ReactDOM.render(&lt;Provider store={store}&gt;&lt;App /&gt;&lt;/Provider&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>saga/index.js</p>
  
  <pre><code>import {fork, all} from 'redux-saga/effects';
  import {watchApiRequest} from './apiTester';
  
  export default function* rootSaga() {
    yield all [
      fork(watchApiRequest)
    ]
  }
  </code></pre>