不変のjs

Question

は、誰も私に伝えることができます：
はどのように私は、特定のユーザーによって理想的にこれらのユーザ（リスト項目）のいずれかにタスクをプッシュしますID？

ありがとうございます。

マイコード：

const initialState = Immutable.List([ 
    Immutable.Map({ 
    "id": 1, 
    "name": "Abe Bell", 
    "tasks": [ 
     { 
     "id": 1, 
     "title": "Get haircut", 
     "status": false 
     } 
    ] 
    }), 
    Immutable.Map({ 
    "id": 2, 
    "name": "Chad Dim", 
    "tasks": [ 
     { 
     "id": 2, 
     "title": "Get real job", 
     "status": false 
     } 
    ] 
    }) 
]) 

Answer 1

まず、あなたがこのような構造を構築している途中、tasks配列は不変のインスタンスではありません、私はあなたが変換するImmutable.fromJSを使用することができ、それはあなたが望むものはないと思いますすべてのネストされた配列と不変インスタンスにマップします。

あなたのデータはあなたがユーザのリストをナビゲートし、IDが一致したときに更新を実行する必要があります構成されている方法。それを行うの

一つの方法は、map

const initialState = Immutable.fromJS([ 
    { 
    "id": 1, 
    "name": "Abe Bell", 
    "tasks": [ 
     { 
     "id": 1, 
     "title": "Get haircut", 
     "status": false 
     } 
    ] 
    }, 
    { 
    "id": 2, 
    "name": "Chad Dim", 
    "tasks": [ 
     { 
     "id": 2, 
     "title": "Get real job", 
     "status": false 
     } 
    ] 
    } 
]); 

let userId = 2; 

let newState = initialState.map(user => { 
    if (user.get('id') !== userId) { 
    return user; 
    } 
    return user.update('tasks', tasks => {  
    return tasks.push(Immutable.fromJS({ 
     id: 3, 
     title: "new task", 
     status: false 
    })) 
    }); 
}); 

を使用している

これはあなたがやりたいだろうが、私はこの種の操作がで再発何かある場合は、リストの代わりにマップに自分のデータを変更すべきだと思いますあなたの申請。これにより、作業がより簡単かつ迅速になります。

const initialState = Immutable.fromJS({ 
    "1": { 
    "id": 1, 
    "name": "Abe Bell", 
    "tasks": [ 
     { 
     "id": 1, 
     "title": "Get haircut", 
     "status": false 
     } 
    ] 
    }, 
    "2": { 
    "id": 2, 
    "name": "Chad Dim", 
    "tasks": [ 
     { 
     "id": 2, 
     "title": "Get real job", 
     "status": false 
     } 
    ] 
    } 
}); 

let userId = "2"; 

let newState = initialState.updateIn([userId, 'tasks'], tasks => { 
    return tasks.push(Immutable.fromJS({ 
    id: 3, 
    title: "new task", 
    status: false 
    })); 
});