Redux: Kind erhält Requisiten vor dem Elternteil

Question

Meine App hat einen Zustand, der ein user Objekt haben kann oder auch nicht.

Ich habe zwei Behältern und zwei Komponenten:

ParentContainer:

const mapStateToProps = (state) => ({ 
    showUserDetails: Boolean(state.user), 
}) 

export default connect(mapStateToProps)(ParentComponent) 

Parent:

const ParentComponent = ({ showUserDetails }) => (
    <div> 
    {showUserDetails && <ChildContainer />} 
    </div> 
) 

ChildContainer:

const mapStateToProps = (state) => ({ 
    name: state.user.name, 
}) 

export default connect(mapStateToProps)(ChildComponent) 

ChildComponent:

const ChildComponent = ({ name }) => (
    <h1>{name}></h1> 
) 

Jedoch habe ich in Szenarien leite, wo nach einer Aktion, die state.user = null setzt, ChildContainer vor ParentContainer zu machen versucht und somit löst eine Ausnahme, da es nicht null.name zugreifen können.

Ist dieses erwartete Verhalten von Redux, das ein untergeordneter Container vor dem übergeordneten Element erneut rendern kann? Im klassischen React-Ablauf würde dieser Fehler nicht auftreten.

Ich schätze in diesem erfundenen Beispiel könnte man einfach <ChildComponent name={user.name} /> in der ParentComponent anstelle eines Containers anrufen. Aber in der realen Welt habe ich tief verschachtelte Komponenten, die auf viele verschiedene Teile des Staates zugreifen, also kann ich nicht einfach einfach Props runterlassen.

Answer 1

Stapeln Sie Ihre Redux-Sendungen? Wenn nicht v3.0.0 Release lesen Hinweise sorgfältig durch:

https://github.com/reactjs/react-redux/releases/tag/v3.0.0

Er schlägt vor, redux-batched-updates Modul, aber es ist mehr oder weniger veraltet zugunsten von redux-batched-subscribe

es wie folgt verwendet:

import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'; 
import { batchedSubscribe } from 'redux-batched-subscribe'; 

const store = createStore(reducer, intialState, batchedSubscribe(batchedUpdates)); 

Answer 2

Die Aktualisierung erfolgt unabhängig von der untergeordneten Komponente, die in einer übergeordneten Komponente enthalten ist oder nicht. Da es sich zum Zeitpunkt der Aktualisierung im DOM befindet, versucht die connect, Ihre Komponente zu aktualisieren.

Die einfachste Problemumgehung wäre das Einfügen einer Sicherheitsprüfung beim Ziehen des Benutzernamens (state.user.name,) und Ersetzen durch (state.user && state.user.name,).

Oder natürlich - die Alternative. Übergabe vom Elternteil.

Um weiter zu erklären, werden die Requisiten, die vom Elternteil gesendet werden, zuerst im Elternteil ausgewertet und dann werden die Aktualisierungen im hierarchischen Baum nach unten propagieren. Da Ihre Requisite von name tatsächlich direkt vom Statusbaum kommt, benötigen Sie einige Sicherheitschecks.

Auch wenn das Elternteil nach einer späteren Aktualisierung seiner eigenen entscheidet, dass das Kind nicht mehr gerendert werden sollte (seit showUserDetails wird jetzt zu false ausgewertet).