Wie übertrage ich eine reaktive Komponente sauber an eine andere Komponente in der Komponentenhierarchie?

Question

Ich habe React + Redux + Typescript Anwendung bestehend aus einer Karte, mehrere Diagramme und eine Reihe von modalen Dialogen (von denen eine ist ein Druckformular). Die presentational and container components sind wie folgt zusammengesetzt.

┌──────────────────────────────────────────┐ 
│ app.tsx         │ 
│ ┌─────────────────────────────────────┐ │ 
│ │ modalsContainer.tsx     │ │ 
│ │ ┌────────────────────────────────┐ │ │ 
│ │ │ printModal.tsx     │ │ │ 
│ │ │ ┌───────────────────────────┐ │ │ │ 
│ │ │ │ printFormContainer.tsx │ │ │ │ 
│ │ │ │ const mergeProps(...); │ │ │ │ 
│ │ │ └───────────────────────────┘ │ │ │ 
│ │ └────────────────────────────────┘ │ │ 
│ └─────────────────────────────────────┘ │ 
│ ┌─────────────────────────────────────┐ │ 
│ │ mapContainer.tsx     │ │ 
│ │ ┌────────────────────────────────┐ │ │ 
│ │ │ map.tsx      │ │ │ 
│ │ │  private map:EsriMap  │ │ │ 
│ │ └────────────────────────────────┘ │ │ 
│ └─────────────────────────────────────┘ │ 
│ ┌─────────────────────────────────────┐ │ 
│ │ dashboard.tsx      │ │ 
│ │ ┌────────────────────────────────┐ │ │ 
│ │ │ charts.tsx      │ │ │ 
│ │ └────────────────────────────────┘ │ │ 
│ └─────────────────────────────────────┘ │ 
└──────────────────────────────────────────┘ 

Die Druckform ermöglicht es dem Benutzer, die Charts zu drucken und zu einer PDF-Karte. Eine Webanforderung wird erstellt, damit der Bericht basierend auf den ausgewählten Diagrammen und der aktuellen Karte gedruckt wird.

const mergeProps = (stateProps: any, dispatchProps: any, ownProps: any): any => { 
    return { 
     fetchReport: (title: string, summary: string, includeMap: boolean) => { 
      if(includeMap) { 
       // fetch map image 
       // need access to mapcontainer /map/esrimap here 
      } 

      // ... fetch report ... 
     }, 
     close: dispatchProps.close 
    }; 
}; 

Diese meist funktioniert, aber ich habe noch zählen das Kartenbild in dem Bericht: Die Logik für diese ist in const mergeProps(...); unten aufgebaut. Um ein Bild der Karte zu erzeugen, muss ich eine PrintTask ausführen. Einer der Parameter für die Druckaufgabe ist das Esri-Map-Objekt. Von mergeProps habe ich jedoch keinen Zugriff auf die MapContainer- oder Map-Komponenten. Wenn ich das täte, könnte ich eine Print():Promise<any> Funktion hinzufügen, um die Aufgabe durchzuführen und das Bild zurückzugeben.

Ich möchte wirklich Globals vermeiden. Andere Fähigkeiten in der Zukunft erfordern möglicherweise auch Zugriff auf die Karte. Ich möchte auch vermeiden, Komponenten als Requisiten so tief durch den Stapel zu führen. Ich lese ein wenig über context, aber das scheint nicht sehr zu empfehlen.

Wie übertrage ich eine Komponente tief in den Stapel hinein?

Answer 1

Ein paar Gedanken:

Zuerst etwas nicht serialisierbaren (wie eine Komponente oder eine Funktion) in den Redux Zustand versetzt ist generell eine schlechte Idee (pro https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state).

Zweitens, warum ist die Callback-Logik derzeit in mergeProps definiert? Diese Option sollte wirklich nur ein Rückgriff auf den letzten Ausweg sein. Es ist besser Callbacks separat zu definieren und an die Komponente zu übergeben. Ich habe einige Diskussionen und Beispiele dazu unter http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/.

Ich glaube, der einfachste Ansatz wäre, eine separate Callback-Funktion zu definieren, die die benötigten Flags und das EsriMap-Objekt als Parameter übernimmt und diese Funktion als Prop zu der Map-Komponente übergibt.