Wiederverwendung von react/redux Komponente auf verschiedenen Routen verbunden mit verschiedenen Teil des Staates

Question

Ich bin auf ein Problem, weil ich eine ziemlich komplexe Komponente habe, die eine Liste von Elementen rendert. Die Liste der Elemente wird direkt aus dem Redux-Statusbaum übernommen. Ich möchte zwei separate Routen haben, die dieselbe Komponente wiederverwenden, aber jede von ihnen wird mit einer anderen Liste aus der Statusbaumstruktur verbunden. Hier

ist ein vereinfachtes Beispiel:

Beginnend mit dem Zustand Baum:

state = { 
    fruits: ['apple', 'banana', 'grape', 'pear'], 
    vegetables: ['celery', 'carrot', 'cucumber'] 
} 

und einer einfachen Auflistung Komponente

class ListView extends Component { 
    render() { 
    return (
     <div> 
     {this.props.items.map((item, index) => 
      <div key={index}>{item}</div> 
     )} 
     </div> 
    ) 
    } 
} 

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

export default connect(mapStateToProps)(ListView) 

Die höhere Ebene App-Komponente wie folgt aussieht:

class App extends Component { 
    render() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

export default connect()(App) 

Und die Routen wie folgt aussehen:

<Route path='/' component={App}> 
    <IndexRedirect to='fruits' /> 
    <Route path='fruits' component={ListView} /> 
    <Route path='vegetables' component={ListView} /> 
    </Route> 

So jetzt die Listview-Komponente wird an den Früchten Teil des redux Zustand verbunden. Allerdings würde ich gerne die Routenstruktur hier verwenden, so dass '/ fruits' und '/ vegetables' beide dieselbe Komponente verwenden, aber '/ fruits' listet die Früchte auf, während '/ vegetables' das Gemüse auflistet.

Die naheliegende Arbeit besteht darin, eine vollständig neue und identische Komponentenklasse zu erstellen und die mapStateToProps-Methode zu ändern, um eine Verbindung zum Gemüsesatz herzustellen.

Gibt es eine Möglichkeit, diese Komponente wiederzuverwenden, aber Zugriff auf verschiedene Teile der jeweiligen Statusbaumstruktur zu haben?

Answer 1

Von Ihrer ListView können Sie sowohl FruitsList als auch VeggiesList als separate Komponenten exportieren und dann die richtige Route anzeigen.

class ListView extends Component { 
    render() { 
    return (
     <div> 
     {this.props.items.map((item, index) => 
      <div key={index}>{item}</div> 
     )} 
     </div> 
    ) 
    } 
} 

function mapStateToPropsVeggies(state) { 
    return { 
    items: state.veggies 
    } 
} 

function mapStateToPropsFruits(state) { 
    return { 
    items: state.fruits 
    } 
} 

const VeggiesList = connect(mapStateToPropsVeggies)(ListView); 
const FruitsList = connect(mapStateToPropsFruits)(ListView); 

export default ListView; 
export { 
    VeggiesList, 
    FruitsList 
}; 

aktualisieren Sie dann den Router:

<Route path='/' component={App}> 
    <IndexRedirect to='fruits' /> 
    <Route path='fruits' component={FruitsList} /> 
    <Route path='vegetables' component={VeggiesList} /> 
</Route>