immutable.jsを使用したReact/Reduxでのディープオブジェクト値の状態の更新

Question

この深く入れ子になった状態配列を持ち、Employee、Task、およびWeekでHoursフィールドを更新する必要があります。私は不変でこれを行う多くの方法を試みましたが、成功しなかった、どんな助け？ここで

は私のデータの例である：

[{ 
    "Employee": "John Doe", 
    "Other Data": "test", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}, { 
    "Employee": "Bill Der", 
    "Other Data": "test", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}] 

Answer 1

あなたは完全にあなたのためにこれに答えるために私のために情報の束が欠落しているが、私は何かをするだろうか、私はあなたを見ることができますそうでなければこのように。

不変のjsが提供するすべての関数を利用することができます。

var changeHours = { 
    "Employee": "John Doe", 
    "TaskTitle": "testTitle", 
    "Week": '2016-10-10', 
    "Hours": "5" 
} 

そして、あなたはこのようにそこに設定されているように、我々は、基本的な状態を持っている：

var myState = Immutable.fromJS([{ 
    "Employee": "John Doe", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}]); 

あなたは、あなたの不変オブジェクトを変異させるために必要な情報と、このようなものがオブジェクトを持って言うことができます注：私は配列を追加しませんでしたが、それらを考慮に入れてマッピングします。 http://fiddle.jshell.net/djj6u8xL/63/ - アクションでそれを見るために

var newstate = myState.map((k, v) => { 
    if (k.get('Employee') === changeHours.Employee) { 
    return k.get('Tasks').map((k, v) => { 
     if (k.get('TaskTitle') === changeHours.TaskTitle) { 
       return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours); 
     } 
     return k; 
    }) 
    return k; 
    } 
return k; 
}); 

：

あなたはimmutablesを反復処理し、あなたが探しているアイテムを見つけ、このような何かにマップを使用することができます。私はmapを使って各配列レベルを反復処理し、changeHoursオブジェクトとimmutablesに基づいてチェックすることで正しいノードを見つけることができたら、適切なレベルになったらsetInを使うだけです。 updateInも使用できます。これは、あなたのシナリオに依存します。

将来的には、あなたの質問のすべての情報を提供してください。データの画像だけでなく、手助けする方がはるかに簡単です:)（データ構造を手動で入力する必要はありません）。

編集：コメントに基づいて更新 - http://fiddle.jshell.net/qxbq1nq3/9/

コード：

function newTasks(k) { 
    return k.get('Tasks').map((k, v) => { 
    if (k.get('TaskTitle') === changeHours.TaskTitle) { 
     return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours); 
    } 
    return k; 
    }); 
} 

var newstate = myState.map((k, v) => { 
    if (k.get('Employee') === changeHours.Employee) { 
    return k.set('Tasks', newTasks(k)); 
    } 
    return k; 
});