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

Question

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

在我的 componentDidMount 方法中，我像这样调度 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 state 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

这就是我在 reducer 中缺少的东西，即扩展运算符。非常感谢，您的所有答案都有效。因为我将随机卡存储在状态中，所以我决定使用空有效负载调度 ADD_SEEN_CARD 函数并改为执行此操作：

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

再次感谢您的所有回答。