How to call an API and update one child from another child in react/redux
<p>I am using redux, react, react-router and reselect. There is a screen that contains two components, the <code>Header</code> and the <code>Body</code>. There is a component in the <code>Header</code> to select an ID. When a new ID is selected a new action is dispatched to update the ID in the state in redux.</p>

<p>Based on that ID there should be an asynchronous API call to load the element from the server and store it in the state, which should then trigger a render of the screen and display the element in the <code>Body</code>. The loaded element would then be extracted from the state with reselect.</p>

<p>The real-life scenario is a bit more complex than that, because there are many different <code>Body</code> components with different API calls and only one <code>Header</code> component. But they can be treated as different screens. So, for example:</p>

<p>Screen 1:</p>

<p>components: <code>Header</code>, <code>BodyTypeA</code>; API to call: <code>apiA</code></p>

<p>Screen 2:</p>

<p>components: <code>Header</code>, <code>BodyTypeB</code>; API to call: <code>apiB</code></p>

<p>My understanding is that the API call should be done in the reducer when it stores the new ID in the state. But how to determine which screen is being shown and which API to call if the action is dispatched by a component shared across screens? Can I somehow subscribe in the <code>Body</code> to changes to the ID and trigger the API call from within the screen? The screen type is determined by the react-router. Would the reducer have any access to the router to determine which screen is being shown? Are there any best practices for handling such a scenario?</p>