How to manipulate Object data inside an array in redux.

gistfile1.txt

// Existing response looks like 
// from algolia after being indexed.  

shows: [{
  id: 232432,
  type: 'show',
  attributes: {
    title: 'Awesomeness Cares',
    atv_id: '322334asdfasdf',
    eidr: 'asdf2r2r2rwfasdfasdf',
    genre: ["Comedy"],
    brand: ["ATV"]
  },
  relationships: {
    // an empty object because we don't want 
    // to index all the attached media objects to the show.
    
  }
}, {
  id: 324234234234,
  type: 'show',
  attributes: {
    title: 'asdfasdfasdf',
    brand: ["Awestruck"],
    genre: ["comedy"],
    etc .....
  },
  relationships: {}
}]

//So the question is how the fuck do we immutably change a show,
// OR how do we append it with more data that we can get remotely 

// first we'd create a controlller method/route that can take can id 
// and fetch all the relationship related data to it. ie.

def relationships
  Show.find(params[:id])
  // etc. etc. etc.
  relationship_response = relationships: {
      long_form: {
      },
      short_form: {
        youtube:
        crossplatform:
        facebook: {
          meta: {
          },
          data: [{
            id: 234234,
            type: 'season',
            attributes: {
              ...etc
            },
            relationships: {
              ///yada yada yada down the tree we go.
              episodes: [{}]
            }
          }]
        }
      }
    }
  response json: relationship_response, status: :ok
end

// Then when recieve this info on the client side we'd do this

requestShowRelationships = (showId) => {
  return dispatch => {
    // note this one is different than the other ones we use because 
    // we wouldn't want to flash the entire content of the page when using the global fetching throbber
    dispatch({type: 'FETCHING_SHOW_RELATIONSHIP'})
    request.get(`/shows/relationships/${showId}`).
            .accepts('Content-Type', 'application/json')
            .then(sucess => {
              dispatch({type: 'ADD_RELATIONSHIPS_TO_SHOW', value: { showId, relationships: success.body.relationships })
            }
            //etc.
  }
}


/// Then in your Dispatcher here is how you would merge these two objects in place. 
dispatcher (currentState, {type, value}) => {
  switch(type) {
    case 'ADD_RELATIONSHIPS_TO_SHOW':
      //find that show from the array of loaded shows
      let selectedShow = currentState.shows.filter(show => show.id === value.showId)
      //get that shows index in the current array
      let selectedShowIndex = currentState.shows.indexOf(selectedShow);
      //append the new relationship data into the existing show
      let showWithRelation = {...selectedShow, relationships: value.relationships};
    
      return {
        ...currentState
        isFetchingRelationship: false,
        // cut the array into two smaller arrays and 
        // put the new show with the relationship data into the middle
        shows: [
                ...currentState.shows.slice(0, selectedShowIndex), 
                showWithRelation, 
                ...currentState.shows.slice(selectedShowIndex + 1 
                ]
      }
}