title: What's the point of using Redux-Thunk vs normal async code? [Examples Included]
body: <p>I've always struggled to get my head around Redux-thunk, as it really don't understand what great purpose it serves. For example, here's a random Redux-Thunk example I found from a website:</p>
  
  <pre><code>export const addTodo = ({ title, userId }) =&gt; {
    return dispatch =&gt; {
      dispatch(addTodoStarted());
  
      axios
        .post(ENDPOINT, {
          title,
          userId,
          completed: false
        })
        .then(res =&gt; {
          setTimeout(() =&gt; {
            dispatch(addTodoSuccess(res.data));
          }, 2500);
        })
        .catch(err =&gt; {
          dispatch(addTodoFailure(err.message));
        });
    };
  };
  </code></pre>
  
  <p>It's seemingly simple, addTodo is a function that takes in the title and userId and returns a function with dispatch as a parameter, which then uses dispatch once and then again for the response of the HTTP request. Because in this case Redux-Thunk is being used, you would just do <code>dispatch(addTodo(x,x));</code></p>
  
  <p>Why would I not just do something like this though?</p>
  
  <pre><code>function addTodo(dispatch, title,userId){
    dispatch(addTodoStarted());
  
    axios
      .post(ENDPOINT, {
        title,
        userId,
        completed: false
      })
      .then(res =&gt; {
        setTimeout(() =&gt; {
          dispatch(addTodoSuccess(res.data));
        }, 2500);
      })
      .catch(err =&gt; {
        dispatch(addTodoFailure(err.message));
      });
  }
  
  </code></pre>
  
  <p>Then from anywhere, I can just call <code>addTodo(dispatch, x, x);</code></p>
  
  <p>Why would I use the Redux-Thunk example over my own?</p>