title: Best place to apply API response transformation
body: <p>In an async action creator, I fetch data from the server. The data is not very well formatted for my use case and I need to transform it to use it in the UI.</p>
  
  <p>Question : should I</p>
  
  <ol>
  <li><p>Transform data just after it arrives before dispatching a success action with the transformed data ?</p>
  
  <pre><code>fetch("some/url")
  .then(res =&gt; dispatch(successActionCreator(transform(res)))
  </code></pre></li>
  <li><p>Dispatch a success action with raw data and store it as, and transform it inside <code>mapStateToProps</code> ?</p></li>
  <li><p>Dispatch a success action with raw data and transform it in the reducer ?</p></li>
  </ol>
  
  <p>In <strong>1.</strong>, the data will be transformed when I need it, and it seems to me that it decouples the API data format and my Redux store. But the transform logic is in the data fetching action.</p>
  
  <p>In <strong>2.</strong>, the async action creator stays simple with no logic at all and the mapping happens at the UI layer. But it means that I'll need to optimise it with something like reselect since <code>mapStateToProps</code> is called for each render.</p>
  
  <p>In <strong>3.</strong>, the async action creator stays simple with no logic at all but the action is coupled to the API data format.</p>
  
  <p>I'm going for <strong>1.</strong> (and unit-test the transform anyway), but I'm not completely happy. Any suggestion ? Thanks !</p>
  
  <p>-- Edit : since the question is subject to an opinionated answer, I'm kinda answering my self here. I'll go with <strong>1.</strong>, for all the reasons stated in the comments and one of the answer.</p>