reduxの状態変更に対応して、別のアクションをディスパッチする方法はありますか？

Question

誰かが私に反応し、Reduxので次の操作を行う方法についての手がかりを与えることができます：

成分Aは、状態（非同期）を更新するアクションをディスパッチする

成分B（Aのない子コンポーネントが）する必要があります状態が変化したときを検出して、別のアクションをディスパッチすることができます。

私の問題は、コンポーネントBでディスパッチアクション2を実行しようとすると、状態はまだ初期状態であり、更新されません。

私も2番目のアクションも（非同期にも及び）状態を更新するため、しかし、それは無限ループを作成し、componentWillUpdateでアクション2を派遣しようとしている

これは、多かれ少なかれ、どのように見えるかです：

//----- Component A 
class ComponentA extends React.Component { 
    constructor(props) { 
    super(props); 
    this.props.dispatch(loadEvents()); // loadEvents is async and will update state.eventsState 
    } 
} 

const mapStateToProps = function (state) { 
    return { 
    eventsState: state.eventsState, 
    }; 
}; 

export default connect(mapStateToProps)(ComponentA); 


//----- Component B 
class ComponentA extends React.Component { 
    constructor(props) { 
    super(props); 
    props.dispatch(getEventUsers(props.eventsState.eventId)); // the eventsState is in initial state here (empty)...where do I call getEventUsers? 
    } 

    componentWillUpdate(nextProps) { 
    nextProps.dispatch(getEventUsers(props.eventsState.eventId)) // Creates an infinite loop, getEventUsers also updates state 
    } 
} 

const mapStateToProps = function (state) { 
    return { 
    eventsState: state.eventsState, 
    }; 
}; 

export default connect(mapStateToProps)(ComponentA); 

Answer 1

Reduxコードを見ていないと、コンポーネントAがほぼ同時にインスタンス化され、その時点でコンポーネントAによって開始された非同期要求であるため、コンポーネントBがコンストラクタで空のデータを取得していると思いますコンストラクタはまだ進行中です。

Reduxは、非同期要求が完了したときに受信したデータを含むアクションを起動する必要があります。あなたのレデューサーは、このデータを状態にして、接続されたコンポーネントの小道具を変更し、それらを再レンダリングさせます。

props.eventState.eventIdが存在し、変更された場合にのみ、getEventUsersを送出する必要があります。