关于调度操作以将项目添加到数组的反应/Redux 问题

Question

我正在构建一个抽认卡应用程序，我想将看到的卡片的 id 存储在一个数组中，这样我的GET_RANDOM_CARD操作就不会两次选择同一张卡。

在我的组件 DidMount 方法中，我调度 addSeenCard 操作，如下所示：

addSeenCard(this.props.randomCard)

这是我为 addSeenCard 提供的便携式动作创建器功能：

export function addSeenCard(randomCard) {

return {
type: 'ADD_SEEN_CARD',
randomCard: randomCard
}
}

这是我的减速器功能：

case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [state.seenCard, action.randomCard.id]
}

但是，Redux 工具不会显示具有 id 值的数组，而是显示具有嵌套空数组且值为 null 的数组。 我正在学习 Redux，并且我被阻止了我的代码中哪里出了问题。

Redux state Raw

Answer 1

您可以使用 concat 状态 seenCard 数组和新值 这是您更新的减速器功能：

case 'ADD_SEEN_CARD':
return {
...state,
seenCard: state.seenCard.concat(action.randomCard.id)
}

Answer 2

你需要解构state.seenCard，就像你对...state所做的那样：

case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [...state.seenCard, action.randomCard.id]
}

Answer 3

从上面的reducer代码中，可以知道"seenCard"将是一个id数组，并且您已经将数组分配为seenCard的第一个元素。

因此，请使用 Spread 运算符来解构元素数组。

case 'ADD_SEEN_CARD':
return {
...state,
seenCard: [
...state.seenCard, 
action.randomCard.id
]
}

请注意代码第 5 行添加的 3 个点。

此外，请确保始终将 id 传递给操作创建者。

我希望这是有帮助的！

Answer 4

这就是我在化简器(点差运算符(中缺少的内容。非常感谢，您的所有答案都有效。因为我将随机卡存储在该状态下，所以我决定使用空有效负载调度 ADD_SEEN_CARD 函数并改为执行此操作：

case 'ADD_SEEN_CARD':
return {
...state,
seenCard: state.seenCard.concat(state.randomCard[0].id)
//  seenCard: [...state.seenCard, state.randomCard[0].id]
}

再次感谢您的所有回答。