wie Requisiten auf eine bestimmte Komponente in redux passieren, wenn

Question

So Iterieren ich diese Komponente haben, in dem ich die Kartenfunktion nutzen eine andere Komponente zu nennen:

class configstepper extends React.Component { 
... 
//in render 
if(this.props.selected_devices){ 
    return(
      this.props.selected_devices.map((row, index) => (
       <DeviceProps key={index} row={row} index={index} /> 

      )))} 
     ...} 

Jetzt ist mein DeviceProps Komponentendaten zu holen, so dass es eine hat Requisiten zu machen mein Problem ist, ich die Requisiten wollen ein jeweils DeviceProps um genau zu sein, nicht alle von ihnen:

class deviceProperties extends Component { 
... 

//in render 
<RaisedButton style={styles.Button}label="Read From Device" primary={true} onClick={this.handleRead.bind(this)}/> 
<TextField id={this.props.index} value={this.props.read_data} readOnly/> 
... 
//handleRead where i trigger the action 
    handleRead(){ 

    this.props.read_device() 
} 

//mapstate to props 
function mapStateToProps(state){ 
return { 
    read_data:state.config.test}} 

connect(mapStateToProps,actions)(deviceProperties) 

Daten geholt auf die Schaltfläche klicken, wenn ich alle machen die DeviceProps Komponenten die gleichen Daten, während ich bekommen will es nur auf die angeklickte Komponente bekommen ent.

Answer 1

Die Funktion mapStateToProps akzeptiert ein zweites Argument, das die Requisiten ist, die Sie an die Komponente vom übergeordneten Element übergeben haben. Sie können diese verwenden, um ein Stück Ihres Bundesstaats abzurufen jede Ihrer DeviceProps Instanzen. Ebenso akzeptiert die mapDispatchToProps die Requisiten auch als zweites Argument, mit dem Sie Aktionen speziell für jede Ihrer DeviceProps Instanzen erstellen können.

Zum Beispiel, sagen Sie in einer Stütze vorbei waren deviceId in Ihre DeviceProps Komponente genannt, mit deviceId eine eindeutige Kennung für ein bestimmtes Gerät zu sein:

<DeviceProps key={index} row={row} index={index} deviceId={deviceId} /> 

Dann können Sie diese eindeutige Kennung in der Karte Zustand verwenden und Requisiten Funktionen wie folgt:

class DeviceProps extends Component { 
    render() { 
     ... 
    } 
} 

function mapStateToProps(state, ownProps){ 
    return { 
    device: state.devices[ownProps.deviceId] 
    } 
} 

function mapActionsToProps(dispatch, ownProps) { 
    return bindActionCreators({ 
    readDeviceData:() => DeviceActions.readDeviceData(ownProps.deviceId) 
    }, dispatch) 
} 

connect(mapStateToProps, mapActionsToProps)(DeviceProps)