title: state is not mapping on props in Redux Saga
body: <p>I am practicing redux saga. I've seen all similar question but they didn't help me .</p>
  <p>Actually my actions are dispatching, fetching data from url and state is changing but no mapping to props.</p>
  <p>My Code</p>
  <p><strong>Home.js</strong></p>
  <pre><code>class Home extends Component {
  
    render() {
      console.log(this.props);
      return (
        &lt;View style={{ justifyContent: &quot;center&quot;, alignItems: &quot;center&quot;, flex: 1 }}&gt;
          &lt;Text&gt;Welcome to Dog Saga&lt;/Text&gt;
          &lt;Button title={&quot;Show Dog&quot;} onPress={this.props.onRequestDog} /&gt;
          {this.props.loading ? (
            &lt;ActivityIndicator size=&quot;large&quot; color={&quot;red&quot;} /&gt;
          ) : this.props.error ? (
            &lt;Text&gt;Error Occured&lt;/Text&gt;
          ) : (
            &lt;Image
              source={{ uri: this.props.url }}
              style={{ width: 100, height: 100 }}
            /&gt;
          )}
        &lt;/View&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      url: state.url,
      loading: state.loading,
      error: state.error
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
    onRequestDog: () =&gt; dispatch(requestDog())
  });
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Home);
  </code></pre>
  <p><strong>apiReducer.js</strong></p>
  <pre><code>import {
    API_CALL_REQUEST,
    API_CALL_SUCCESS,
    API_CALL_FAILURE
  } from &quot;../actions/actionTypes&quot;;
  
  const initialState = {
    url: &quot;&quot;,
    loading: false,
    error: false
  };
  
  const apiReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case API_CALL_REQUEST:
        return {
          ...state,
          url: &quot;&quot;,
          loading: true,
          error: false
        };
      case API_CALL_SUCCESS:
        return {
          ...state,
          url: action.url,
          loading: false,
          error: false
        };
      case API_CALL_FAILURE:
        return {
          ...state,
          url: &quot;&quot;,
          loading: false,
          error: true
        };
      default:
        return state;
    }
  };
  
  export default apiReducer;
  </code></pre>
  <p><strong>apiSaga.js</strong></p>
  <pre><code>import { takeEvery, call, put, all } from &quot;redux-saga/effects&quot;;
  import axios from &quot;axios&quot;;
  import * as types from &quot;../actions/actionTypes&quot;;
  import {
    requestDog,
    requestDogSuccess,
    requestDogError
  } from &quot;../actions/actions&quot;;
  
  //watcher saga, watches for actions dispatached to the store , starts worker saga
  export default function* watcherSaga() {
    yield takeEvery(types.API_CALL_REQUEST, workerSaga);
    //yield takeLatest(API_CALL_REQUEST, workerSaga);
  }
  
  // function that makes the api request and returns a Promise for response
  function fetchDog() {
    return axios({
      method: &quot;get&quot;,
      url: &quot;https://dog.ceo/api/breeds/image/random&quot;
    });
  }
  
  // worker saga: makes the api call when watcher saga sees the action
  export  function* workerSaga() {
  
    try {
      
      //yield put(requestDog());
      const response = yield call(fetchDog);
  
      // dispatch a success action to the store with the new dog
      yield put(requestDogSuccess(response.data));
    } catch (error) {
      // dispatch a failure action to the store with the error
      yield put(requestDogError());
    }
  }
  </code></pre>
  <p><strong>Problem</strong></p>
  <p>RequestDog is dispatching well and image url is also retrieving well but the changed state in store doesn't showing any effect component. Means image is not loading.</p>
  <p>Picture will tell you the story what's happening.</p>
  <p><a href="https://i.stack.imgur.com/bDwz9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bDwz9.png" alt="redux logger" /></a></p>