Redux reducer payload

Question

completely new to redux. Having this scenario -

after making the form submit action -

onFormSubmit(e){
   e.preventDefault();
   this.props.fetchTracks(this.state.term);
}

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 -

Once when the reducer is written in this way -

export default function (state = [] , action) {
  switch(action.type) {
  case FETCH_TRACKS:
  return action.payload;
 }

 return state;
}

And once when the reducer is written in this way -

    export default function (state = [] , action) {
      switch(action.type) {
      case FETCH_TRACKS:
      return [action.payload, ...state];
     }

     return state;
   }

on my component, I am trying to do map over this array and for now just console log each element of the array -

renderVideos(track){
   console.log(track);
}

render(){
  return (
    <ul className="col-md-12 list-inline">
      {this.props.tracks.map(this.renderVideos)}
    </ul>
  )
}

When doing scenario one - the renderVideos doesn't being called, there is no console.log

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.

As I said, completely new to redux.

What is happening here?

At what moment do you call the action? Can you put the example? — Fuechter
Hey, thanks. updated the question with the form submit that makes the action — Maayans
I recommend that you should watch the basics redux tutorials before implementing the scenario or read the docs. — Alqama Bin Sadiq

Fuechter Fuechter · Accepted Answer · 2018-02-03T19:44:09

On scenario one, most likely the payload is empty array, so the console doens't being called on map.

On scenario two, you must create a new state using rest-spread, just like you already do with the state.

Example:

export default function (state = [] , action) {
  switch(action.type) {
    case FETCH_TRACKS:
      return [...action.payload, ...state];
  }

  return state;
}

Redux reducer payload

1 Answers