Redux＆React Router：ディスパッチとナビゲーションを組み合わせる（history.push）

Question

リアクタのhistory.push('/route')をReduxとどのように使うのかちょっと分かりません。

つまり、ReduxのmapDispatchToPropsでコンポーネントを接続すると、特定のアクションをディスパッチした後に解雇されると思われるhistory.push('/route')をどうやって入れますか？

問題を明確にするためには、ここに

class PostContainer extends React.Component { 

    handleSubmit(data) { 
     return this.props.addPost(data); 
    } 

    render() { 
     return (<Post onSubmit={data=> this.handleSubmit(data)}/>); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       this.props.history.push('/posts') 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

export default connect(null, mapDispatchToProps)(PostContainer); 

あなたはできるだけ早くポストはaddPostFulfilledを通じて再来の状態に追加されると、見ることができるように、ページが移動する必要があります...私の実験の抜粋です/posts via history.push

Reduxのドキュメントによれば、コンテナは状態の更新（データの取得だけでなく）のために作られています。だから、ダムコンポーネントはhistory.pushのようなものを置くはずではありません。

上記のコードよりも優れた方法はありますか？

アドバイスをいただければ幸いです。

Answer 1

次のいずれかのユーザーは、ルータReduxのを反応させる（初期設定を必要とする）と

import { push } from 'react-router-redux' 
    class PostContainer extends React.Component { 

    handleSubmit(data) { 
     return this.props.addPost(data); 
    } 

    render() { 
     return (
      <div> 
       <Post onSubmit={data=> this.handleSubmit(data)}/> 
      </div> 
     ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       dispatch(push('/posts')); 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 
export default connect(null, mapDispatchToProps)(PostContainer); 

または単に「完了コールバック」としてプッシュを渡すアクションクリエイターからあなたの行動を派遣することができます。

class PostContainer extends React.Component { 

    handleSubmit(data, done) { 
     return this.props.addPost(data, done); 
    } 

    render() { 
     const { push } = this.props.history; 
     return (
      <div> 
       <Post onSubmit={data=> this.handleSubmit(data, push)}/> 
      </div> 
     ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data, done) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       done('/posts') 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

export default connect(null, mapDispatchToProps)(PostContainer); 

Answer 2

私見あなたaddPostFulFilledデータは、あなたのコンポーネント自体であなたのthis.history.push('/route')を行うためのオプションを持って行われたら、すなわち

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 
       <!-- removed from here --> 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

、でもあなたのダムのコンポーネントからhistory.pushを行うことができます。 propsが更新されたときに呼び出されるライフサイクルメソッドのいずれかを実行できます。 おそらく、それをcomponentWillReceivePropsに追加します。あなたはstore経由場所の変更を追跡しないようにOKです

class PostContainer extends React.Component { 
    componentWillReceiveProps(nextProps){ 
    /*Added here*/ 
    if(nextProps.someFlag){ this.props.history.push('/someRoute'); 
}} 

注のみ

1. 場合は、上記の作品ということ
   。（Read More）
2. あなたはあなたをラップされる場合にはreact-router-4を使用していますwithRouterと接続すると、履歴オブジェクトがPostContainerの小道具として存在することが可能になります。
3. shouldComponentUpdateに不要なrerendersと必要なロジックを書き込まないように注意する必要があります。

ちんぷんかんぷんの全体の多くのような上記の音ならば、あなたは常にブラウザの歴史の中で新しいエントリを押して有効react-router-reduxさんpush APIで行くことができます。あなたは任意の場所でそれをインポートして、新しいルートを押すだけです。

詳細はreact-router-redux github pagesにここで見ることができ、ドキュメントに

両方のプッシュを引用し、URLやプレーンな文字列のURLを記述した オブジェクトにすることができ、ロケーション記述子、でテイクを交換します。これらのアクションクリエーター は、単一のオブジェクトでrouterActionsとしても使用できます。 は、ReduxのbindActionCreators（）を使用する際の便宜のために使用できます。

だから、直接あなたのmapDispatchToProps内history.push()を使用するか、またはあなたのPostContainerコンポーネントを反応させる内部で使用する小道具として渡します。

---