Javascript 反应：减少操作导致Redux reducer处于未定义状态

在这个项目/示例中，我使用Redux实现了一个基本的Like计数器

以下代码用于管理状态增加：

行动

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

export function decrease(index) {
  return {
    type: 'DECREASE_LIKES',
    index: i
  };
}

减速器

function posts(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
      ];
    default:
      return state;
  }
}

组件

<button onClick={this.props.increment.bind(null, i)} className="likes">

<button onClick={this.props.decrease.bind(null, i)} className="likes">

减速机=>添加了减速机案例

function rooms(state = [], action) {
  switch (action.type) {
    case 'INCREMENT_LIKES' :
      const i = action.index;
      return [
        ...state.slice(0, i),
        {...state[i], likes: state[i].likes + 1 },
        ...state.slice(i + 1)
      ];
    case 'DECREASE_LIKES' :
      return [
        ...state.slice(0, i),
        {...state[i], likes: state[i].likes - 1 },
        ...state.slice(i + 1)
      ];
    default:
      return state;
  }
}

组件

<button onClick={this.props.increment.bind(null, i)} className="likes">

<button onClick={this.props.decrease.bind(null, i)} className="likes">

当我调试时，在减少的情况下，状态是未定义的

---

我做错了什么？如何修复它？

看起来变量

i

未在减速机开关语句的

reducer\u LIKES

案例中定义。因此，这将导致

reduce\u LIKES

reduce的逻辑产生不正确的结果

考虑对减速器进行以下调整以解决问题：

功能室（状态=[]，动作）{
开关（动作类型）{
案例“增量_LIKES”：{
常数i=action.index；
返回[
…状态切片（0，i），
{…状态[i]，likes:state[i]。likes+1}，
…状态切片（i+1）
];
}
“减少”案例：{
//使用不同的变量进行视觉区分/清晰度
const j=action.index；
//在此操作的还原逻辑中使用来自操作索引的j
返回[
…状态切片（0，j），
{…state[j]，likes:state[j].likes-1}，
…状态切片（j+1）
];
}
违约：
返回状态；
}
}