小道具変更時に反応コンポーネントを再レンダリングする

Question

私は、プレゼンテーションコンポーネントをコンテナコンポーネントから分離しようとしています。私はSitesTableとSitesTableContainerです。コンテナは、現在のユーザーに基づいて適切なサイトをフェッチするための冗長アクションをトリガーする役割を果たします。問題は、コンテナコンポーネントが最初にレンダリングされた後に、現在のユーザーが非同期にフェッチされることです。つまり、コンテナコンポーネントは、SitesTableに送信するデータを更新するcomponentDidMount関数でコードを再実行する必要があることを認識しません。私は、その小道具（ユーザ）の1つが変更されたときにコンテナコンポーネントを再レンダリングする必要があると思う。どのように私はこれを正しく行うのですか？

class SitesTableContainer extends React.Component { 
    static get propTypes() { 
     return { 
     sites: React.PropTypes.object, 
     user: React.PropTypes.object, 
     isManager: React.PropTypes.boolean 
     } 
    } 

    componentDidMount() { 
     if (this.props.isManager) { 
     this.props.dispatch(actions.fetchAllSites()) 
     } else { 
     const currentUserId = this.props.user.get('id') 
     this.props.dispatch(actions.fetchUsersSites(currentUserId)) 
     } 
    } 

    render() { 
     return <SitesTable sites={this.props.sites}/> 
    } 
} 

function mapStateToProps(state) { 
    const user = userUtils.getCurrentUser(state) 

    return { 
    sites: state.get('sites'), 
    user, 
    isManager: userUtils.isManager(user) 
    } 
} 

export default connect(mapStateToProps)(SitesTableContainer); 

Answer 1

componentWillReceivePropsメソッドで条件を追加する必要があります。

これはあなたがたときに小道具何かを起動したい場合は、componentDidUpdateのような利用できるいくつかの他の機能を持っている、または、おそらく1があなたの、componentWillReceiveProps（nextProps）を探して、あなたのコンポーネントが

constructor(){ 
    this.updateUser = this.updateUser.bind(this); 
} 


componentDidMount() { 
    this.updateUser(); 

} 

componentWillReceiveProps(nextProps) { 
    if(JSON.stringify(this.props.user) !== JSON.stringify(nextProps.user)) // Check if it's a new user, you can also use some unique, like the ID 
    { 
      this.updateUser(); 
    } 
} 

updateUser() { 
    if (this.props.isManager) { 
    this.props.dispatch(actions.fetchAllSites()) 
    } else { 
    const currentUserId = this.props.user.get('id') 
    this.props.dispatch(actions.fetchUsersSites(currentUserId)) 
    } 
} 

Answer 2

componentWillReceiveProps(nextProps) { // your code here} 

私はそれはあなたが必要なイベントだと思います。 componentWillReceivePropsは、コンポーネントが小道具で何かを受け取るたびに起動します。そこからあなたの点検をして、あなたがしたいことを何でもしてください。

Answer 3

私はこのanswerをご覧になり、自分が行っていることに関連しているかどうかを確認することをおすすめします。あなたの本当の問題を理解していれば、非同期アクションを正しく使用せず、reduxの "store"を更新するだけです。これによりコンポーネントが新しい小道具で自動的に更新されます。

あなたのコードのこのセクション：

componentDidMount() { 
     if (this.props.isManager) { 
     this.props.dispatch(actions.fetchAllSites()) 
     } else { 
     const currentUserId = this.props.user.get('id') 
     this.props.dispatch(actions.fetchUsersSites(currentUserId)) 
     } 
    } 

はコンポーネントでトリガされていないなら、それはあなたの最初の要求を実行した後に処理する必要があります。

はredux-thunkから、この例を見てください：

function makeASandwichWithSecretSauce(forPerson) { 

    // Invert control! 
    // Return a function that accepts `dispatch` so we can dispatch later. 
    // Thunk middleware knows how to turn thunk async actions into actions. 

    return function (dispatch) { 
    return fetchSecretSauce().then(
     sauce => dispatch(makeASandwich(forPerson, sauce)), 
     error => dispatch(apologize('The Sandwich Shop', forPerson, error)) 
    ); 
    }; 
} 

あなたは必ずしもReduxの-サンクを使用する必要はありませんが、それはこのようなシナリオについてのあなたの理由を助けると一致するコードを記述します。