使用 action/reducer 推送 React-redux-router

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

我想做的是同时将 url 更改为 /product/foo 但我不太清楚我把这段代码放在哪里 - 任何帮助表示赞赏

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

使用 action/reducer 推送 React-redux-router

React-redux-router push with action/reducer

reactjs

react-redux

react-router-v4