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を使用します。常に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 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と、すべてのコメントのコピー
2. ...とdataキーをオーバーライドして、私のコピーlikedCommentで連結するが、オーバーライドされたデータを持ちます