Best practice with react redux refreshing data with updated date range

Question

I'm using react-redux for my new project and I'm looking for advise on best practice to do the following.

I have a container with 2 components.

Component A which I'll use to update date range

Component B which is going to display data with updated date range from 1st component.

So, in component A,

1. I'm using axios to call my API to update dates

2. On success, I'm using axios again (inside the success promise) to call API to re-get data (with new date range) and call reducer to update the state.

It feels wrong to call API nested in success promise. Is there a better way to do this?

Should I be calling refresh data somewhere else other than in component A? like action?

Sorry this is a bit of a noob question but trying to get my head around redux architecture.

Answer 1

There is no need to call the API again in component B . You have to use containers for component A and Component B and once you update the date in component in A save those values in redux store. and in component b container you will get that updated values from sate like

const mapStateToProps = (state) => {
return {
    upadteData: state.upadteData,

}

}

and component B you just use

this.props.upadteData