Wie aktualisiert man ein Objekt im Zustand 'State' mit react redux?

Question

In meinem Minderer, nehme ursprünglich habe ich diesen Zustand:

{ 
    "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 
     } 
    } 
} 

Nun, ich liked Eigenschaft innerhalb -L1LwSwW97KkwdSnYvsc Objekt aktualisieren möchten, die data Objekt im Inneren ist und es true machen. Dies ist, was ich habe versucht, aber es scheint, dass es falsch ist, denn nachdem ich den Zustand aktualisiert haben, die componentWillReceiveProps Funktion innerhalb einer Komponente, die auf die Zustandsänderung hört nicht ausgelöst werden:

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

return { ...state, data }; 

Könnten Sie Bitte geben Sie an, warum es falsch ist und wie ich es ändern sollte, damit es funktioniert?

Answer 1

Sie mutieren Staat! Wenn Sie destrukturiert:

var { data } = state; 

Es ist das gleiche wie:

var data = state.data; 

Also, wenn Sie tun:

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

Sie sind noch state.data Modifikation, welche wiederum state mutiert. Das ist nie gut - eine verschachtelte Verbreitung Syntax:

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

Answer 2

Mit Spread-Operator ist gut, bis Sie beginnen mit tief verschachtelten Zustand arbeiten und/oder Arrays (denken Sie daran Spread Operator hat eine flache Kopie nur).

Ich würde Ihnen eher empfehlen, mit zu arbeiten. Es ist eine React-Empfehlung und wird Ihren Code lesbarer und fehlerfreier machen.

Beispiel:

import update from "immutability-helper"; 

    (...) 

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