JS REDUX STORE 我想將 object 添加到對象數組中，該對象數組嵌套在數組中的特定 object 中

Question

在我的應用程序中，我有一個詳細信息頁面，產品下方有評論。 用戶可以選擇使用表情符號對評論做出反應。 目前我的 Redux 商店看起來像這樣：

Details: {
ratings: [ {} ],
comments: [ 
{ 
  id: 1,
  comment: 'text',
      reactions: [{
         id: 1,
         emoji: ':)',
         userId: 2
      }, {...}]

}, {...} ]
}

當用戶選擇一個表情符號對評論做出反應時，我向 BE 發送一個動作，反應被保存，用 newReaction object 響應 FE。 我想將 newReaction object 添加到上述特定commentId的反應數組中。 下面是我的 reducer 的簡化版本：

const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case BOOK_DETAILS_SUCCESS:
      return { ...action.payload };

    case REACTION_POST_SUCCESS:
      return {
        ...state,
        comments: [...state.comments, action.payload],
      };

    default:
      return state;
  }
};

我不知道如何在評論數組中定位特定的commentId object。 然后將 newReaction object 添加到它。

Answer 1

由於 state 是不可變的，因此您需要對其進行深度復制、修改和返回。

也許是這樣的：讓 nextState = {...state} nextState.comments = [...state.comments]; //這對於您能夠修改嵌入的對象/數組至關重要。

//現在修改 nextState 並使用包含新表情符號的新 Obj 更新它

返回下一個狀態；

希望這可以幫助。 如果其中任何一個沒有意義，請告訴我。