経路と還元状態のデータを同時に更新する

Question

私はユーザープロファイルを持つアプリを持っています。ユーザープロフィールには友人のリストがあり、友達をクリックすると他のユーザープロフィールに移動します。

現在、私は（Reduxのルータのリンクを介して）他のプロファイルに移動しクリックしたときには、URLを更新しますが、プロファイルを更新したり、新しいルートをレンダリングされません。

は、ここで私は単純化のために多くのコードを撮影した、単純化されたコードスニペットです。下にレイヤがいくつかありますが、プロファイルコンテナの最上位レイヤで問題が発生します。 UserIdのpropをProfileSectionsのために更新することができれば、すべてが伝播します。あなたが見ることができるように

class Profile extends Component { 

    componentWillMount() { 
    const { userId } = this.props.params 

    if (userId) { this.props.getUser(userId) } 
    } 

    render() { 
    return <ProfileSections userId={user.id} /> 
    } 
} 

const mapStateToProps = ({ user }) => { 
    return { user } 
} 

export default connect(mapStateToProps, { getUser })(Profile); 

、何が起こるかは、私は一度だけ起こるとルート変更が、プロファイルデータが更新されない理由であろう、componentWillMount上getUserアクションを実行しているということです。

componentWillUpdateのような別のライフサイクルフックに変更してgetUserアクションを実行すると、状態が更新され続けてコンポーネントが更新されるため、リクエストの無限ループに陥ります。

私はまた、ルートコンポーネントでreact-routerから提供されたonEnterフックを使用しようとしましたが、同じルートであるため、プロファイルから別のプロファイルへナビゲートするときに起動しないため、動作しません。

私は間違った方法でこのことを考えているとのデータがReduxのストアに格納されている間、私は別のプロファイルからナビゲートするこのような状況を扱うことができる方法についていくつかのガイダンスを探しています信じています。

Answer 1

だから私はお勧めしますが、以下の方法でこれをアプローチ：私はそれがcomponentWillMountライフサイクルメソッドでそう設定している

class Profile extends Component { 
    componentWillMount() { 
    const { userId } = this.props.params 

    if (userId) { 
     // This is the initial fetch for your first user. 
     this.fetchUserData(userId) 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    const { userId } = this.props.params 
    const { userId: nextUserId } = nextProps.params 

    if (nextUserId && nextUserId !== userId) { 
     // This will refetch if the user ID changes. 
     this.fetchUserData(nextUserId) 
    } 
    } 

    fetchUserData(userId) { 
    this.props.getUser(userId) 
    } 

    render() { 
    const { user } = this.props 

    return <ProfileSections userId={user.id} /> 
    } 
} 

const mapStateToProps = ({ user }) => { 
    return { user } 
} 

export default connect(mapStateToProps, { getUser })(Profile); 

注意は、あなたが最初のuserIdを要求します。 componentWillReceivePropsメソッドのコードは、新しいユーザーIDが受信されたかどうかを確認し（別のプロファイルに移動したときに発生する）、データがあれば再フェッチします。

あなたはfetchUserDataコールのために、それぞれの代わりにcomponentWillMountとcomponentWillReceivePropsのcomponentDidMountとcomponentDidUpdateを使用して検討することができるが、それはあなたのユースケースに依存性があります。