Wie Zustand mehr als eine Komponente in redux

Question

ich mit der Arbeit beginnen passieren mit Reagieren + Redux und Neuling auf den Rahmen. *

Was zu tun ist, sie versuche?

Ich muss auf eine Schaltfläche klicken und auf den Klick zeigt es einen SVG-Pfad in anderen Container/SVG-Tag.

Mein Code oder meinen Code

import { connect } from "react-redux"; 
import { BodyTemplate, Button } from "../component/svgPreview/Preview.jsx"; 
import { previewBodyTemplate } from "../modcon/Actions.js"; 

const mapStateToProps = ({ previewTemplateState }) => { 
    return ({ 
     previewTemplateState: previewTemplateState 
    }); 
}; 

const mapDispatchToProps = (dispatch) => { 
    return ({ 
     onImageClick: (value) => { 
      dispatch(previewBodyTemplate(value)); 
     } 
    }); 
}; 

/* the following code will work because we cannot export more then one by 
default **/ 

/* 
const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button); 
const PreviewBody = connect(mapStateToProps, mapDispatchToProps)(BodyTemplate); 
export default PreviewContainer; 
export default PreviewBody; 

*/ 


/* so i try this */ 

export const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button); 
export const PreviewBody = connect(mapStateToProps)(BodyTemplate); 

Nach meinen knowlage ich bin vorbei, den Zustand zu zwei Komponenten so, wenn der Zustand eines Update wird es in die andere aktualisieren.

Aber die Datei funktioniert nicht, weil wir und nicht direkt exportieren.

Wie ich angehen müssen, um den Staat zu mehr als einer Komponente

unten ist der Fehler zu passieren, wenn ich direkt

Export bin *

Answer 1

Sie brauchen eine übergeordnete Komponente zu erstellen, diese Die Komponente enthält die Schaltfläche und die Vorschaukomponente.

const MyContainer = ({ image, onImageClick }) => (
    <div> 
    <div className="sidebar"> 
     <Button label="Preview image" onClick={onImageClick} /> 
    </div> 
    <div className="content"> 
     <Preview source={image} /> 
    </div> 
    </div> 
); 

Sobald Sie Ihren Container fertig haben, müssen Sie die Requisiten dieser Komponente dem Status/Aktionen von redux zuordnen.

Jetzt erhält der Hauptcontainer die Daten und die Aktionen, von dort können Sie alles senden, was Sie an die Kinderkomponenten benötigen.

Die Schaltfläche und die Vorschaubildkomponente sind statusfreie Komponente, sie erhalten nur Requisiten aus dem übergeordneten Container.