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

本文介绍了Redux - 如何在reducer中添加数组的条目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我坚持这一点，我无法进步 - 我想解决方案很简单，但我无法弄清楚。我正在尝试在reducer中添加条目，因此数据将会显示： state = { entryId：{ entryName：[something，something2，something3/ *等等... * /] } }; 到目前为止，这是我最接近的，但是，而不是添加新的唯一条目，它正在替换已经存储的那个。此外，我需要能够将此项目添加到空状态，其中entryId，entryName不存在以避免错误： switch（type）{ case ADD_ENTRY： return { ... state， [entryId]：{ ...状态[entryId]， [entryName]：{ [uniqueEntry]：true } } }; } 任何想法我在做错什么？解决方案如果你想添加一个元素到 entryName 数组的末尾，你应该是做： return { ...状态 [entryId]：{ ... state [entryId]， [entryName]：[ ... state [entryId] [entryName]， uniqueEntry ] } }; ES6传播与数组的工作原理如下： const array1 = [1，2，3]; const array2 = [4，5，6]; const 8 = 8; const newArray = ['stuff'，... array1，'things'，... array2，... [7，8]，9]; console.log（newArray）; // [stuff，1，2，3，things，4，5，6，7，8，9] 查看这个要点，其中有一个非常类似于你正在做的事情的例子 我发现这组示例也非常有帮助。这里有很多好东西： https：// github .com / sebarkbage / ecmascript-rest-spread 更新： 如果 entryName 被初始化为 undefined 像你在评论中说的那样，你可以这样做： return { ... state， [entryId]：{ ... state [ entryId]， [entryName]：[ ... state [entryId] [entryName] || []， uniqueEntry ] } }; 我认为这是一个非常好的例子，它使用React / redux大量的嵌套数据结构。 FWIW，多次推荐我尽可能地平坦化你的状态。 I stuck with this bit and I can't progress - I guess solution is simple but I can't figure out. I'm trying to add entry in reducer so data in in would look something this:state = { entryId: { entryName: ["something", "something2", "something3" /* and so on... */] }};So far this is the closest I get, but, instead of adding new unique entry, it is replacing the one that is stored already. Also I need to be able to add this item to empty state where entryId, entryName doesn't exist yet to avoid error:switch(type) { case ADD_ENTRY: return { ...state, [entryId]: { ...state[entryId], [entryName]: { [uniqueEntry]: true } } };}Any idea what I'm doing wrong? 解决方案 If you're trying to add an element to the end of the entryName array you should be doing:return { ...state, [entryId]: { ...state[entryId], [entryName]: [ ...state[entryId][entryName], uniqueEntry ] }};ES6 spread with arrays works like this: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]Check out this gist which has an example of something very similar to what you're doing.I found this set of examples extremely helpful as well. A lot of great stuff in here:https://github.com/sebmarkbage/ecmascript-rest-spreadUpdate:If entryName is initialized to undefined like you say in your comment, you could do this:return { ...state, [entryId]: { ...state[entryId], [entryName]: [ ...state[entryId][entryName] || [], uniqueEntry ] }};I think this is a pretty great example of how painful it can be working with React/redux using a heavily nested data structure. FWIW, it's been recommended to me many times to flatten your state as much as possible. 这篇关于Redux - 如何在reducer中添加数组的条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！