title: Using Redux Saga to get information from API
body: <p>I'm learning <code>Redux Saga</code> and trying to call an API everytime a component is rendered, and save the response of the API in the State object. I implemented the <code>Component</code> like this:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Container } from "./styles";
  import { withRouter } from "react-router-dom";
  import { bindActionCreators } from "redux";
  import * as ratesActions from "../../stores/actions/rates";
  import { connect } from "react-redux";
  
  class Main extends Component {
    componentDidMount() {
      ratesActions.updateRate();
    }
  
    render() {
      return (
        &lt;Container&gt;
          &lt;div&gt;
            &lt;h1&gt;Hi there!&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    rates: state.rates
  });
  
  const mapDispatchToProps = dispatch =&gt;
    bindActionCreators(ratesActions, dispatch);
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(withRouter(Main));
  </code></pre>
  
  <p>I want to everytime the <code>componentDidMount</code>, call the <code>updateRate()</code> action. This is the <code>updateRate()</code> action:</p>
  
  <pre><code>export function updateRate() {
    return {
      type: "ASYNC_RATE_UPDATED"
    };
  }
  </code></pre>
  
  <p>This action is executed, because if I put a <code>console.log</code> in there, I can see it's working.</p>
  
  <p>Then, I created my <code>sagas</code>:</p>
  
  <pre><code>import api from "../../services/api";
  import { call, put, takeLatest, all } from "redux-saga/effects";
  
  export function* updateRateAsync() {
    try {
      const response = yield call(api.get("public/rates/all"));
  
      yield put({
        type: "RATE_UPDATE_SUCCEEDED",
        response: response.data
      });
    } catch (error) {
      yield put({
        type: "RATE_UPDATE_FAILED",
        message: error.message
      });
    }
  }
  
  export function* watchUpdateRates() {
    yield takeLatest("ASYNC_RATE_UPDATED", updateRateAsync);
  }
  
  export default function* root() {
    yield all([watchUpdateRates()]);
  }
  </code></pre>
  
  <p>And my reducer:</p>
  
  <pre><code>export default function rates(state = [], action) {
    switch (action.type) {
      case "RATE_UPDATE_SUCCEEDED":
        console.log(action.response[0]["exchange_rate"]);
        return {
          ...state,
          rates: {
            ves: action.response[0]["exchange_rate"],
            brl: null,
            ars: null,
            inr: null,
            zar: null
          }
        };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>However, my <code>saga</code> won't listen to my <code>action</code>, and won't execute the <code>API</code> call. What am I doing wrong?</p>
  
  <p>Thanks in advance!</p>