title: Redux reducer payload
body: <p>completely new to redux. Having this scenario - </p>
  
  <p>after making the form submit action - </p>
  
  <pre><code>onFormSubmit(e){
     e.preventDefault();
     this.props.fetchTracks(this.state.term);
  }
  </code></pre>
  
  <p>action and continue to the reducer I return the action.payload which is an array. I have noticed in different behavior with two different scenarios -</p>
  
  <p>Once when the reducer is written in this way -</p>
  
  <pre><code>export default function (state = [] , action) {
    switch(action.type) {
    case FETCH_TRACKS:
    return action.payload;
   }
  
   return state;
  } 
  </code></pre>
  
  <p>And once when the reducer is written in this way - </p>
  
  <pre><code>    export default function (state = [] , action) {
        switch(action.type) {
        case FETCH_TRACKS:
        return [action.payload, ...state];
       }
  
       return state;
     } 
  </code></pre>
  
  <p>on my component, I am trying to do map over this array and for now just console log each element of the array -</p>
  
  <pre><code>renderVideos(track){
     console.log(track);
  }
  
  render(){
    return (
      &lt;ul className="col-md-12 list-inline"&gt;
        {this.props.tracks.map(this.renderVideos)}
      &lt;/ul&gt;
    )
  }
  </code></pre>
  
  <p>When doing scenario one - the renderVideos doesn't being called, there is no console.log </p>
  
  <p>When doing scenario two - the renderVideo is being called but it seems like it console.log the element before making the action (I am using redux-logger to see log). another thing that this scenario is doing is having the state as an array that each action of the FETCH_TRACKS is being saved as a new index in the array Instead of creating a new state with the current action array.</p>
  
  <p>As I said, completely new to redux.</p>
  
  <p>What is happening here?</p>