React-Redux、多くのレベルのコンテナメソッドへの参照を深く渡しますか？

Question

解決策は私が仕事をすることができます。私は良い方法があるのだろうかと思っています。基本的には、私はCourseesPage> CourseList> CourseListRowから小道具としてonDeleteを渡しています。 CourseListRowはonDeleteがトリガーされている場所で、削除したいコースのidをevent.target.value経由でCoursesPageコンテナコンポーネントのdeleteCourse関数に渡しています。

これを行うクリーナー方法はありますか？この場合、コンテキストを使用するのは意味がありますか？

コンテナコンポーネント方法をレンダリング：

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レベル：

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レベル：

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

あなたが店のためのReduxのを使用して反応-Reduxのをコンポーネントと店舗との間の接続のための場合は、ほとんどの場合、あなたは1つのレベル（いくつかの回あなたよりも深い小道具を渡すべきではありませんそれらをまったく渡すことはできません）。 Reduxのに慣れてあなたを想定して反応-ReduxのAPIを見、http://redux.js.org/docs/basics/UsageWithReact.html

簡体例：

単離された成分と使用コネクタを使用することをお勧めしますが、このチュートリアルでは、ちょっと便利です。

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

この後、ストアのデータを使用する各コンポーネントを接続します。 ypurアプリの非常に深いで

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

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

export default connect(mapStateToProps)(CoursesList); 

あなたはボタンのための容器を行います：あなたの行の

//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); 

あなたは単に非ButtonComponentが、ButtonContainerをインポートし、小道具としてIDを設定します。