リアクト - Reduxのルータプッシュ

Question

アイブ氏は、アクションにオブジェクト（selectedPost）を渡し、単純なクリックハンドラを得た - 以下のコンポーネントである：ここでは

class SearchBarContainer extends Component { 
    render() { 
    return (
     <div> 
      <div className="center-xs"> 
      <p>To get started, type in some keywords below</p> 
      </div> 
      <SearchBar onTermChange={this.props.actions.loadPosts} onNull={this.props.actions.nullPosts}/> 
      <PostList posts={this.props.posts} isFetching={this.props.isFetching} onClick={this.props.actions.selectPost}/> 
     </div> 
    ); 
    } 
} 

はアクションです：

export function selectPost(post) { 
    return { 
    type: SELECT_POST, 
    payload: post 
    } 
} 

私は何をしたいが、同時に製品/ fooの/を押してURLを変更しているが、私はこのコードを置く場所はかなり把握カント - 任意のヘルプは

Answer 1

に感謝あなたは呼び出すことによってそれを行うことができます機能ンonClickして、ルートを変更するだけでなく、関数内からアクションを呼び出す

class SearchBarContainer extends Component { 
    selectPost = (post) => { 
     this.props.history.push('/product/foo'); 
     this.props.actions.selectPost(post) 
    } 
    render() { 
    return (
     <div> 
      <div className="center-xs"> 
      <p>To get started, type in some keywords below</p> 
      </div> 
      <SearchBar onTermChange={this.props.actions.loadPosts} onNull={this.props.actions.nullPosts}/> 
      <PostList posts={this.props.posts} isFetching={this.props.isFetching} onClick={this.selectPost}/> 
     </div> 
    ); 
    } 
} 
export default withRouter(SearchBarContainer);