title: Calling API's In componentDidMount or in the on click of the button
body: <p>I am new to the <code>react-redux</code>. Here, I have a button, which is like ,</p>
  
  <pre><code>&lt;button className="btn btn-primary fetchBtnSize"
              disabled={this.state.disableFetchQuestion}
              onClick={() =&gt; this.fetchQuestions()}&gt;
              Fetch Questions
                  &lt;/button&gt;
          &lt;/div &gt;
  </code></pre>
  
  <p>Now, In this method </p>
  
  <pre><code>fetchQuestions() {   this.props.fetchQuestions(result); }
  </code></pre>
  
  <p>Now In my action ,</p>
  
  <pre><code>export function fetchQuestions(arrayOfQuesObjs) {
      return (dispatch) =&gt; {
          dispatch({
              type: REQUEST_INITIATED
          });
          post(FETCH_QUESTIONS_URL, arrayOfQuesObjs)
              .then((response) =&gt; {
                  if (response.status === 200) {
                      dispatch({
                          type: REQUEST_SUCCESSED,
                      });
                      history.push('/quiz-questions');
                      dispatch({
                          type: FETCHING_QUESTIONS_SUCCESS,
                          data: response.payload,
                      })
                  }
                  else {
                      dispatch({
                          type: REQUEST_SUCCESSED
                      });
                      toastr.error(response.status.message);
                      dispatch({
                          type: FAILED_QUESTIONS_FETCHING,
                          data: response.status,
                      });
                      if (response.status === 401) {
                          toastr.error("Please login again");
                          localStorage.clear();
                          history.push('/');
                      }
                  }
              })
      }
  }
  </code></pre>
  
  <p>So, here After success only I am redirecting the user to the <code>quiz-questions page</code>.</p>
  
  <p>Now, on this I am rendering one component .</p>
  
  <p>Now, What happens is that when user clicks on the reload page of the <code>quiz-questions</code> that time this data which was fetched from the server gets lost . because the state gets cleared.
  Now, what I did was like ,</p>
  
  <pre><code>on history.push({ pathName: '/quiz-questions', state : { data: 1, isfetch: true   }})
  </code></pre>
  
  <p>so, that when I click on reload button that time I will take that data from the <code>props.location.state.data</code></p>
  
  <p>and then </p>
  
  <pre><code>componentDidMount() { this.props.fetchQuestions(props.location.state.data);  }
  </code></pre>
  
  <p>Now, Here,what is happening,On click of the <code>button</code> If I remove the api call and redirect user to the <code>/quiz-questions</code> that time if the api gets faild then user should be at <code>previous page only</code></p>
  
  <p>So, I am not understanding where to call this <code>API</code>. If I keep it on both places then <code>it will call two times</code>. SO, How can I resolve this ? </p>