React/Redux 關於調度操作以將項目添加到數組的問題

Question

我正在構建一個抽認卡應用程序，我想將看到的卡片的 ID 存儲在一個數組中，所以我的 GET_RANDOM_CARD 操作不會 select 同一張卡片兩次。

在我的 componentDidMount 方法中，我發送 addSeenCard 操作，如下所示：

addSeenCard(this.props.randomCard)

這是我用於 addSeenCard 的便攜式動作創建器 function：

export function addSeenCard(randomCard) {


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

這是我的減速機 function：

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

但是，Redux 工具沒有顯示具有 id 值的數組，而是顯示了一個具有嵌套空數組且值為 null 的數組。 我正在學習 Redux 並且我被阻止我的代碼哪里出錯了。

Redux state 未加工

Answer 1

您需要解構state.seenCard ，就像您對...state所做的那樣：

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

Answer 2

從上面的 reducer 代碼中，可以知道“seenCard”將是一個 id 數組，並且您已將數組指定為 seeCard 的第一個元素。

因此，請使用 Spread 運算符來解構元素數組。

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

請注意在第 5 行代碼中添加的 3 個點。

此外，確保 id 始終傳遞給操作創建者。

我希望這是有幫助的！

Answer 3

您可以使用 concat state seenCard 數組和新值這是您更新的減速器 function：

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

Answer 4

這就是我在減速器（擴展運算符）中所缺少的。 非常感謝，您的所有答案都有效。 因為我將隨機卡存儲在 state 中，所以我決定使用空有效負載發送 ADD_SEEN_CARD function 並執行以下操作：

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

再次感謝您的所有回答。