2017-07-09 3 views
0

In Redux empfangen, ich folgendes in einem redux-Thunk Aktion Schöpfer ausgeführt wird:Reagieren componentDidUpdate nicht letzte Requisiten

dispatch({type: "CASCADING_PROMPT_STATUS", promptName, list: 'model', status: 'disabled'}); 
dispatch({type: "CASCADING_PROMPT_STATUS", promptName, list: 'model', status: 'enabled'}); 

Dieses verkürzte zweimal auslöst, und ich kann in der Konsole, die Redux Zustandsänderungen sehen von deaktiviert -> aktiviert.

In React habe ich die folgende Komponente, die Requisiten mit Status verbunden hat, von denen CASCADING_PROMPT_STATUS aktualisiert.

jedoch in meiner Komponente, ich bin mit einer Überprüfung, ob Staat in componentDidUpdate(prevProps)

geändert

Dies löst nicht.

Wenn ich den Aktionsersteller ändern, um den zweiten Versand setTimeout(<dispatch...>, 1); sogar um eine Millisekunde zu verzögern, prevProps! == this.props, was ich erwarte.

Meine Komponente wird redux verbunden wie so:

const C_Component = connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(Component); 

Hat Batch Reagieren auf Änderungen stützen? Warum muss ich den zweiten Versand verzögern? Ich dachte Redux Versand wäre synchron.

Edit: So wie ich die redux Zustand bin Aktualisierung ist wie folgt:

var newState = {}; 

if (!_.isUndefined(state)){ 
    newState = _.cloneDeep(state); 
} 
... 
    case "CASCADING_PROMPT_STATUS": 
     newState[action.promptName][action.list].disable = action.status === 'disabled'; 
     break; 

Antwort

1

Redux Versendungen synchron sind (es sei denn, eine Middleware abfängt und verzögert die Aktion). In den meisten Fällen werden jedoch React-Aktualisierungen in Stapel zusammengefasst.

Zweitens mutiert Ihr Reducer definitiv den Zustand, weil Sie nicht alle Ebene der Verschachtelung kopieren, die aktualisiert werden muss. Die Mutationen bewirken, dass Ihre verbundene Komponente denkt, dass sich nichts geändert hat, und die Aktualisierung wird übersprungen. Weitere Informationen zur ordnungsgemäßen Durchführung unveränderlicher Updates finden Sie im Abschnitt Structuring Reducers - Immutable Update Patterns der Dokumentation.

Eigentlich ... Re-Lesen Sie Ihre Reducer, Sie sind machen einen tiefen Klon, so in der Theorie, die nicht mutiert. Jedoch, per Redux FAQ, deep cloning is a bad idea. Stattdessen sollten Sie verschachtelte flache Updates tun.

Drittens sollte Ihre nicht this.props vs nextProps selbst vergleichen. Die eigentlichen Requisiten Objekte selbst werden definitiv anders sein. Stattdessen sollte es die Inhalte dieser Objekte vergleichen - dh, props.a !== nextProps.a && props.b !== nextProps.b, etc. Dies ist bekannt als eine "flache Gleichheit Vergleich".

+0

Wenn React-Aktualisierungen stapelweise vorliegen, gibt es eine Möglichkeit, den Status umzuschalten, ohne den zweiten Versand absichtlich zu verzögern? – tgun926

+0

Ich benutze eigentlich 'shouldComponentUpdate' nicht, ich benutze' componentDidUpdate' - soll ich den ersten verwenden? – tgun926

+0

@ tgun926 Was ist der Vorteil, den Zustand zu mutieren, nur um ihn danach erneut <1 ms zu mutieren? Dies ist für den Benutzer nebenbei unbemerkbar. – trixn

Verwandte Themen