Redux - 不可变更新操作

Question

我正在为一个简单的添加/删除/更新应用程序编写一个reducer，我正在使用React和Redux。在某种情况下，我想要更新string和array，如下所示：

const initialState = {
  columns: ['col1', 'col2', 'col3', 'col4'],
  ...
}

这是我的方法：

case ACTION:
  const columns = state.columns;
  return {
    ...state,
    columns: columns.map((column, index) => {
      if(index !== action.index) {
        return column;
      }
      return action.column;
    });
  }

问题是，当我在视图中更改数组中的特定元素时（例如，索引2现在是'col3new'），我希望新列数组看起来像这样： columns: ['col1', 'col2', 'col3new', 'col4']。

但返回的数组是：columns: ['col3new', 'col1', 'col2', 'col4']我不知道为什么。

我知道不允许改变国家。但我正在返回一个新阵列。