React reducer中的多个动作

Question

我有两个动作来处理我的reducer中的状态

INCREMENT_LIKES

VISUALIZE_WIDTH

这些动作完全可以单独运作，但由于我想配对它们，出现问题

控制台错误

未捕获的TypeError：无法读取属性＆＃39; w＆＃39;未定义的

行动

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

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

减速机

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;
}

在我的组件中

    <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>

我对这些行动做错了什么？