Idiomatische Möglichkeit, eine Aktion auf eine Unterkomponente in react redux zu verschicken, ohne Requisiten durch den ganzen Weg zu schicken

Question

Ich lerne gerade, wie man reactive, redux und react-redux verwendet und ein ziemlich einfaches Bedürfnis hat. Ich möchte so etwas wie die folgenden machen ...

-------------------------------- 
| title 1   |----------| | 
| description 1 | button 1 | | 
| desc... cont. |----------| | 
|------------------------------| 
| title 2   |----------| | 
| description 2 | button 2 | | 
| desc2... cont. |----------| | 
|------------------------------| 
| title 3   |----------| | 
| description 3 | button 3 | | 
| desc3... cont. |----------| | 
|------------------------------| 

Diese Liste Items darstellt. Jede Item (3 in der Abbildung gezeigt) hat eine title und eine description. Wenn ich auf den Knopf klicke, möchte ich eine Aktion für diesen Item ausführen, wie zum Beispiel das Anzeigen einer Alarmbox mit dem Titel Item's.

Ich schaffte eine funktionierende Probe basierend auf der Redux Tutorial. Ich endete mit 1 Container (Smart) -Komponente mit dem Namen ItemsContainer.tsx und zwei Präsentation (dumm) -Komponenten mit den Namen ItemList.tsx (die Liste) und Item.tsx (ein einzelnes Element). Hierarchisch sieht es so aus ...

App 
-- ItemsContainer 
---- ItemList 
------ Item 
------ Item 

jedoch wie das Redux Tutorial dies erforderlich, dass ich die onClick Funktion durch jede der Präsentationskomponenten über Requisiten bestanden. Wenn ich eine viel tiefere Verschachtelung hätte, könnte das zu einer Belastung werden, also versuche ich einen anderen Weg zu finden.

Was ich jetzt habe sind zwei Container-Komponenten ItemListContainer.tsx, ItemContainer.tsx und zwei Präsentationskomponenten ItemList.tsx und Item.tsx. Wenn ich jedoch auf die Schaltfläche klicke, wird in meiner Alarmbox einfach [Object object] angezeigt. Ich glaube, was passiert, ist, dass das Button-Klick-Ereignis tatsächlich empfangen wird, anstatt der Item.id, aber ich bin mir nicht sicher, wohin ich von hier gehe, um sicherzustellen, dass die richtige Funktion dem onClick zugewiesen wird. Hierarchisch sieht es so aus ...

App 
-- ItemListContainer 
---- ItemList 
------ ItemContainer 
-------- Item 
-------- Item 

Der Code wird wie folgt ...

// app.tsx 
import * as React from 'react'; 
import { ItemListContainer } from '../addItem/ItemListContainer'; 

export const App =() => { 
    return <div><ItemListContainer/></div>; 
}; 

// itemListContainer.tsx 
import { ItemList } from './itemList'; 
import { connect } from 'react-redux'; 


function mapStateToProps(state: any): any { 
    return { 
     items: state.items 
    } 
} 

export const ItemListContainer = connect(mapStateToProps, null)(ItemList); 

// itemList.tsx 
import * as React from 'react'; 
import { IItems, IItemSummary } from '../../data/Items/models/Item'; 
import { ItemContainer } from './ItemContainer'; 

export const ItemList = (props: IItems) => { 

    let divStyle = { 
      position: 'block', 
      border: 'solid #aeb0b5 1px', 
      overflowY: 'auto', 
      overflowX: 'hidden', 
      width: 650, 
      height: 300 
    }; 

    return (
     <div style={divStyle}> 
      { 
       props.items.map(function (item: IItemSummary) { 
        return <ItemContainer {...item} />; 
       }) 
      } 
     </div> 
    ); 
}; 

// itemContainer.tsx 
import { Item } from './Item'; 
import { IItems } from '../../data/Items/models/Item'; 
import { removeItem } from "../../data/Items/actions/initDashboardItems" 
import { connect } from 'react-redux'; 


function mapStateToProps(state: any): any { 
    return { 
     items: state.items 
    }; 
} 


const mapDispatchToProps = (dispatch: any): any => { 
    return { 
     onClick: (id: any) => { 
      alert(id); 
     } 
    }; 
}; 

export const ItemContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Item); 

// item.tsx 
import * as React from 'react'; 
import { IItemSummary } from '../../data/items/models/item'; 

export const item = (props: IItemSummary) => { 

    let outerDiv = { 
      position: 'relative', 
      borderBottom: 'solid #aeb0b5 1px', 
      width: '650px' 
     }; 

     let textDiv = { 
      position: 'relative', 
      width: '500px', 
      padding: 5 
     }; 

     let buttonDiv = { 
      position: 'absolute', 
      top: '5px', 
      right: '10px', 
      padding: 5 
     }; 

    return (
     <div style={outerDiv}> 
      <div style={textDiv}><strong>{props.title}</strong></div> 
      <div style={textDiv}>{props.description}</div> 
      <div style={buttonDiv}><button onClick={props.onClick}>Add Chart</button></div> 
     </div> 
    ); 
}; 

Während ich schließlich lösen müssen, wie man verbinde die richtige Funktion zum onclick mit React und Redux Ich möchte auch wissen, was das idiomatische Re ist Akt Redux Weg, um diesen Code für die UI am Anfang dieses Beitrags zu strukturieren?

Answer 1

Wenn ich eine viel tiefere Verschachtelung hatte dies beschwerlich werden könnte, damit ich einen anderen Weg

zu finden bin versucht, Sie würden in den Requisiten passieren, so viel wie möglich (stumm Komponenten), aber bei An jedem Punkt können Sie eine neue intelligente Komponente erstellen, die an eine beliebige Stelle (in eine dumme Komponente oder in eine andere intelligente Komponente) eingefügt werden kann.

Answer 2

Die Lösung, das Problem mit falscher Verdrahtung des onClick zur Fixierung der item.tsx Datei wie so ...

// item.tsx 
import * as React from 'react'; 
import { IItemSummary } from '../../data/items/models/item'; 

export const item = (props: IItemSummary) => { 

    const clickHandler =() => props.onClick(props.title); 

    // style stuff omitted for clarity 

    return (
     <div style={outerDiv}> 
      <div style={textDiv}><strong>{props.title}</strong></div> 
      <div style={textDiv}>{props.description}</div> 
      <div style={buttonDiv}><button onClick={clickHandler}>Add Chart</button></div> 
     </div> 
    ); 
}; 

Eine explizite clickHandler Funktion eingeführt wurde, zu ändern war, so dass die props.title sein könnte an die Methode props.onClick übergeben.

Ich bin mir immer noch nicht sicher, ob das idiomatische react-redux ist und kann diese Antwort aktualisieren, sollte eine geeignetere Methode gefunden werden.

(Dank acemarke und andere auf dem Redux-Community-Kanal auf discordapp.com für ihre Unterstützung)