Redux-如何在reducer中向数组添加条目

Question

我坚持了这一点，但我无法继续前进-我猜解决方案很简单，但我不知道。我正在尝试在reducer中添加条目，以便输入的数据看起来像这样：

state = {
  entryId: {
    entryName: ["something", "something2", "something3" /* and so on... */]
  }
};

到目前为止，这是我得到的最接近的内容，但是，它没有添加新的唯一条目，而是替换了已经存储的条目。另外，我还需要能够将此项目添加到entryId，entryName还不存在的空状态，以避免出现错误：

switch(type) {
  case ADD_ENTRY:
    return {
      ...state,
      [entryId]: {
        ...state[entryId],
        [entryName]: {
          [uniqueEntry]: true
        }
      }
    };
}

知道我在做什么错吗？

Answer 1

如果要在entryName数组的末尾添加元素，则应该执行以下操作：

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName],
      uniqueEntry
    ]
  }
};

ES6与数组一起传播是这样的：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const eight = 8;

const newArray = ['stuff', ...array1, 'things', ...array2, ...[7, eight], 9];
console.log(newArray); // ["stuff", 1, 2, 3, "things", 4, 5, 6, 7, 8, 9]

查看这个要点，它有一个与您正在做的事情非常相似的示例。

我发现这组示例也非常有帮助。这里有很多很棒的东西：

https://github.com/sebmarkbage/ecmascript-rest-
spread

更新：

如果entryName初始化为undefined喜欢在评论中说的那样，则可以执行以下操作：

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName] || [],
      uniqueEntry
    ]
  }
};

我认为这是一个很好的例子，说明了使用高度嵌套的数据结构与React / redux一起工作会多么痛苦。FWIW，曾多次向我建议尽量平缓您的状态。