CODEWITHSUNDEEP
reactjsreact-reduxreact-router-v4
rhysclay
rhysclay

Reputation: 1683

React-redux-router push with action/reducer

Ive got a simple click handler which passes an object (selectedPost) to an action - below is the component:

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

Here is the action:

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

What I want to do is at the same time change the url with push to /product/foo but I cant quite figure out where I put this code - any help appreciated

Upvotes: 1

Views: 656

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

You could do it by calling a function onClick and then changing the route as well as calling the action from within the function

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

Upvotes: 1

Related Questions