Redux Reducer - 基於ID的過濾器數組，然後更改鍵/值對

Question

我有一個我想根據ID過濾的註釋數組，並更改特定的鍵/值對。我的控制檯日誌函數返回數組中的正確項目，但我不確定使用.filter函數的結果並將'喜歡'鍵從'false'更改爲'true'的正確語法。如果適合這種情況，我可以使用擴展運算符。

import * as types from '../actions/actionTypes'; 
import initialState from './initialState'; 

export default function commentReducer(state = initialState.comments, action) { 
    switch (action.type) { 
    case types.ADD_COMMENT_LIKE_SUCCESS: 
     const content = Object.assign({}, state); 
     const likedComment = content.data.filter(comment => (
     comment.id === action.commentId 
    )); 
     console.log(likedComment[0]); 
     break; 

    default: 
     return state; 
    } 
} 

的評論對象是這樣的：

"data":{ 
     "data":[ 
     { id: '', comment: '', liked: false }, 
     { id: '', comment: '', liked: false }, 
     { id: '', comment: '', liked: false }, 
     { id: '', comment: '', liked: false } 
     ], 
     "cursor":"CkUKEQoEZGF0ZRIJCNrwhcWhvdUCEixqFGRldn5kZXZlbG9wbWVudC0xMzAwchQLEgdDb21tZW50GICAgLSe_-cKDBgAIAE=", 
     "more":false, 
     "count":4 
    }, 

Answer 1

您使用的是有正確的語法的過濾功能，雖然你的減速機應該與喜歡的鍵值對，尤其是評論返回所有的評論如此，您可以如何繼續使用使用地圖功能相同的。

import * as types from '../actions/actionTypes'; 
import initialState from './initialState'; 

export default function commentReducer(state = initialState.comments, action) { 
    switch (action.type) { 
    case types.ADD_COMMENT_LIKE_SUCCESS: 
     const content = Object.assign({}, state); 
     content.data = content.data.map(comment => { 
         const newObj = {...comment}; 
         if(newObj.id === action.commentId) 
         { 
          newObj.likeKey = true; 
         } 
         return newObj; 
     }); 
    console.log(content); 
    return content; 
    default: 
     return state; 
    } 
} 

地圖functin將返回您到目前爲止的所有評論，並更改該特定評論對象。希望這可以幫助。

Answer 2

我會使用find而不是過濾器，因爲它總是隻返回一個項目。

我不能完全肯定你如何分裂的狀態，但我可以建議返回，如：

import * as types from '../actions/actionTypes'; 
import initialState from './initialState'; 

export default function commentReducer(state = initialState.comments, action) { 
    switch (action.type) { 
    case types.ADD_COMMENT_LIKE_SUCCESS: 
     const otherComments = state.data; 
     const likedComment = state.data.find(comment => (
     comment.id === action.commentId 
    )); 
     const index = state.data.indexOf(likedComment); 

     return { 
      ...state, 
      data: { 
       [ 
        ...otherComments.slice(0, index), 
        { ...likedComment, liked: true }, //Override properties here 
        ...otherComments.slice(index + 1) 
       ] 
      } 
     }; 

    default: 
     return state; 
    } 
} 

沒有必要從國家複製的內容，因爲我不修改狀態。

基本上我：

1. 複製state和壓倒一切的data鍵與...的所有評論
2. 一個副本和我副本likedComment串聯，但與被覆蓋的數據