「状態」のオブジェクトをreact reduxで更新するにはどうすればよいですか？私の減速で

Question

、もともと私はこの状態があるとします。

{ 
    "loading": false, 
    "data": { 
     "-L1LwSwW97KkwdSnYvsc": { 
      "likeCount": 10, 
      "liked": false, // I want to update this property 
      "commentCount": 5 
     }, 
     "-L1EY2_fqzn7sM1Mbf_F": { 
      "likeCount": 8, 
      "liked": true, 
      "commentCount": 22 
     } 
    } 
} 

今、私はdataオブジェクトの内部にある-L1LwSwW97KkwdSnYvscオブジェクト、内部のlikedプロパティを更新し、それtrueようにしたいです。これは私がしようとしてきたものですが、私は状態を更新した後に、状態変化をリスンするコンポーネントの内部componentWillReceiveProps機能がトリガされませんので、どうやら、それは、間違っている：

var { data } = state; 
data['-L1LwSwW97KkwdSnYvsc'].liked = !data['-L1LwSwW97KkwdSnYvsc'].liked; 

return { ...state, data }; 

あなたはでしたなぜそれが間違っているのか、それを動作させるためにどのように変更するべきかを明記してください。

Answer 1

あなたは突然変異しています！あなたはdestructure時：だから、あなたが行うとき

var data = state.data; 

：

var { data } = state; 

をそれは同じだ

data[…].liked = !data[…].liked 

あなたはまだstateを変異順番にあるstate.dataを修正しています。それは決して良いことだ - いくつかのネストされたスプレッドの構文を使用します。

return { 
    ...state, 
    data: { 
    ...state.data, 
    '-L1LwSwW97KkwdSnYvsc': { 
     ...state.data['-L1LwSwW97KkwdSnYvsc'], 
     liked: !state.data['-L1LwSwW97KkwdSnYvsc'].liked 
    } 
    } 
}; 

Answer 2

使用広がりオペレータはあなたが深くネストされた状態および/または配列で作業を開始するまでは良いですが（スプレッドオペレータは浅いコピーのみを行います覚えておいてください）。

代わりにimmutability-helperで作業を開始することをお勧めします。これは、Reactの推奨事項であり、コードを読みやすくし、バグを解消します。

例：

import update from "immutability-helper"; 

    (...) 

    const toggleLike = !state.data["-L1LwSwW97KkwdSnYvsc"].liked 
    return update(state, { 
    data: { 
     "-L1LwSwW97KkwdSnYvsc": { 
     like: { 
      $set: toggleLike 
     } 
     } 
    } 
    })