React-Redux, Verweis auf Container-Methode viele Ebenen tief?

Question

Die Lösung, mit der ich arbeiten kann - ich frage mich, ob es einen besseren Weg gibt. Grundsätzlich gebe ich Delete als Requisiten von CoursesPage> CourseList> CourseListRow weiter. CourseListRow ist der Ort, an dem onDelete ausgelöst wird, und ich gebe die ID des zu löschenden Kurses über event.target.value an die Funktion deleteCourse in der Container-Komponente CoursesPage weiter.

Gibt es einen saubereren Weg, dies zu tun? Ist die Verwendung von Kontext in diesem Fall sinnvoll?

Verfahren in Container-Komponente Render:

CoursesPage.js

render() { 
    const {courses} = this.props; 
    return (
     <div> 
     <h1>Courses</h1> 
     <input type="submit" 
       value="Add Course" 
       className="btn btn-primary" 
       onClick={this.redirectToAddCoursePage}/> 

     <CourseList 
       courses={courses} 
       onDelete={this.deleteCourse}/> 
     </div> 

    ); 
    } 

1. Stufe:

CourseList.js

import React, {PropTypes} from 'react'; 
import CourseListRow from './CourseListRow'; 

const CourseList = ({courses, onDelete}) => { 
    return (
    <table className="table"> 
     <thead> 
     <tr> 
     <th>&nbsp;</th> 
     <th>Title</th> 
     <th>Author</th> 
     <th>Category</th> 
     <th>Length</th> 
     </tr> 
     </thead> 
     <tbody> 
     {courses.map(course => 
     <CourseListRow key={course.id} course={course} onDelete={onDelete}/> 
    )} 
     </tbody> 
    </table> 
); 
}; 

CourseList.propTypes = { 
    courses: PropTypes.array.isRequired 
}; 

export default CourseList; 

2. Stufe:

CourseListRow.js

import React, {PropTypes} from 'react'; 
import {Link} from 'react-router'; 

const CourseListRow = ({course, onDelete}) => { 
    return (
    <tr> 
     <td><a href={course.watchHref} target="_blank">Watch</a></td> 
     <td><Link to={'/course/' + course.id}>{course.title}</Link></td> 
     <td>{course.authorId}</td> 
     <td>{course.category}</td> 
     <td>{course.length}</td> 
     <td> 
     <button 
      type="submit" 
      name="deleteCourseButton" 
      onClick={onDelete} 
      value={course.id} 
     > Delete </button> 
     </td> 

    </tr> 
); 
}; 

CourseListRow.propTypes = { 
    course: PropTypes.object.isRequired 
}; 

export default CourseListRow; 

Answer 1

Wenn Sie redux für Speicher und reagieren-redux für die Verbindung zwischen den Komponenten und Speicher, in den meisten Fällen verwenden, sollten Sie keine Requisiten tiefer als eine Ebene (einige Male übergeben Sie kann sie überhaupt nicht passieren). Dieses Tutorial ist irgendwie praktisch: http://redux.js.org/docs/basics/UsageWithReact.html

Vereinfachtes Beispiel, vorausgesetzt, Sie sind mit redux vertraut und sah reagieren-redux API:

Es ist besser isolierte Komponenten und Konnektoren zu verwenden.

// assume, that CoursesList is your App 
<Provider store={store}> 
    <CoursesList/> 
<Provider> 

Danach verbinden Sie jede Komponente, die Daten aus dem Geschäft verwendet.

// CoursesListContainer.js 
import {connect} from 'react-redux'; 
import CoursesList from './CoursesListComponent.js' 

function mapStateToProps(state) { return state.courses; } 

export default connect(mapStateToProps)(CoursesList); 

Am sehr tief von ypur app Sie Container für Taste wird:

//DeleteButtonContainer.js 
import {connect} from 'react-redux'; 
import actionCreators from './actionCreators' 
import DeleteButton from './DeleteButtonComponent'; 

function mapStateToProps() { return {};} 

function mapDispatchToProps(dispatch, ownProps) { 
    return { 
    onClick:() => dispatch(actionCreators.deleteCourse(ownProps.id)) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(DeleteButton); 

in Ihrer Reihe importieren Sie einfach nicht ButtonComponent, aber ButtonContainer und setzen ID als Requisiten.