2017-05-06 5 views
1

Ich habe ein Problem gefunden, bei dem ein Redux-Speicher korrekt aktualisiert wird, aber die Komponente spiegelt die Änderung nicht wider. Ich habe mehrere Möglichkeiten ausprobiert, um sicherzustellen, dass ich den Staat nicht mutiere, aber das Problem bleibt bestehen. Meine Reduzierungen nehmen gewöhnlich die Form:Gewährleistet JSON.parse (JSON.stringify (state)) keine Mutation des Redux-Status?

case 'ADD_OBJECT_TO_OBJECT_OF_OBJECTS': { 
    newState = copyState(state); 
    newState.objectOfObjects[action.id] = action.obj; 
    return newState; 
} 

Für meine copyState Funktion, ich in der Regel Object.assign verschachtelt verwenden() ruft, aber Fehler zu vermeiden, ist nicht so einfach. Für die Prüfung, um sicherzustellen, dass ich Zustand nicht mutiert, ist es richtig,

const copyState = (state) => { 
    return JSON.parse(JSON.stringify(state)); 
}; 

als garantierter Methode nicht mutiert (Redux) Zustand zu verwenden, unabhängig davon, wie teuer der Prozess?

Wenn nicht, gibt es andere tiefe Kopiermethoden, auf die ich mich verlassen kann, um sicherzustellen, dass ich nicht mutieren bin?

EDIT: Angesichts der Tatsache, dass andere Menschen das gleiche Problem haben, werde ich die Lösung auf das Problem, das ich hatte.

Ich habe versucht, eine Aktion zu versenden, und dann in der Zeile nach, ich habe versucht, auf Daten aus dem Geschäft zuzugreifen, die in der vorherigen Zeile aktualisiert wurde.

dispatchAction(data) // let's say this updates a part of the redux state called 'collection' 
console.log(this.props.collection) // This will not be updated! 

Siehe https://github.com/reactjs/redux/issues/1543

+0

'state' unberührt wird in' copyState' –

+0

es möglich wäre (aber unglaublich dumm) 'zu geben state' eine' .toJSON' Methode, die es mutiert. – Bergi

Antwort

0

Ja, das tut einem tiefen Klon, unabhängig davon, wie teuer es ist. Der Schwierigkeitsgrad (wie im Kommentar unter der Frage angedeutet) besteht darin, sicherzustellen, dass state überall sonst unberührt bleibt.

Da Sie nach anderen Ansätzen fragen, und das würde nicht in einen Kommentar passen, schlage ich vor, einen Blick auf ImmutableJS werfen, die das Problem der Verfolgung Statusmutation Bugs beseitigt (aber mit seinen eigenen Einschränkungen kommen):

const { Map } = require('immutable') 
const map1 = Map({ a: 1, b: 2, c: 3 }) 
const map2 = map1.set('b', 50) 
map1.get('b') // 2 
map2.get('b') // 50 
+0

Danke für die Antwort. Ich möchte jedoch sicherstellen, dass ich kein grundlegendes Missverständnis von redux habe. Du hast erwähnt, dass der Staat überall unberührt bleibt. Um zu testen, habe ich diese JSON.parse() -Ansatz in jedem einzelnen Reducer verwendet. Dennoch wird der Speicher korrekt aktualisiert (Middleware zeigt Änderungen nach dem Aktionsversand in 'nextState' an), aber die Komponente spiegelt diese Änderungen nicht wider. Bedeutet dies, dass das Problem sicher NICHT ist redux erfordert einen nicht mutierten Zustand, oder habe ich etwas falsch verstanden, wie redux in dieser Implementierung von copyState funktioniert? – underscore

+0

Angesichts der verfügbaren Informationen denke ich, Sie sind nicht Missverständnis ... und ich hoffe, ich bin auch nicht :) Ich bin auch ein Anfänger über redux, aber wir können sicher sagen, Ihre 'copyState' Funktion bietet die richtigen Garantien (unabhängig von seiner Performance). Das Problem scheint also woanders zu sein: / –

Verwandte Themen