Multiple actions in React reducer

Question

I have two actions to handle the states in my reducer

INCREMENT_LIKES

VISUALIZE_WIDTH

Those actions work perfectly individually but since i want to pair them, something goes wrong

Console error

Uncaught TypeError: Cannot read property 'w' of undefined

The Action

// increment
export function visualize(index) {
  return {
    type: 'VISUALIZE_WIDTH',
    index
  }
}

export function increment(index) {
  return {
    type: 'INCREMENT_LIKES',
    index
  }
}

The reducer

export default function svgs(state = [], action) {
  switch(action.type) {
    case 'INCREMENT_LIKES' :
      const i = action.index;
      return [
        ...state.slice(0,i), // before the one we are updating
        {...state[i], likes: state[i].likes + 1},
        ...state.slice(i + 1), // after the one we are updating
      ];
    case 'VISUALIZE_WIDTH':
      console.log("Incrementing dats!!");
      return [
        ...state.slice(0,i), // before the one we are updating
        {...state[i], w: state[i].w + 100},
        ...state.slice(i + 100), // after the one we are updating
      ];
    default:
      return state;
  }
  return state;
}

in my component

    <button onClick={this.props.increment.bind(null, i)} className="likes">&hearts; {svg.likes}</button>
    <button onClick={this.props.visualize.bind(null, i)}>Change Data</button>

What am i doing wrong with the actions?