'When does Redux Store updates the props of a subscribed component-- Is it asynchronous event?

I am trying to get my head around a scenario where I am dispatching a synchronous redux action (using createAction of typesafe-actions) and soon after that making a network call that relies on updated props from the store.

Scenario:

Inside clearFilters handler function (handler function invoked on click of clear filters button), I am dispatching a synchronous action and then making a network call as below:

clearFilters = (): void => {
    this.props.resetFilters(); //action dispatched
    this.refreshData;   //network call
};

Inside the refreshData function, my component expects updated filter props and based on it, it creates a searchCondition to be passed to the list api call as payload.

refreshData = (): void => {
    const { listData, filters } = this.props; //get the filters prop

    //Expected filters to be updated from the store post dispatch of action
    const SearchCondition: SearchCondition = createSearchConditions(filters);
    
    listData({
        SearchCondition,
        MaxResults: this.maxRecordsCount,
        SortFields: this.getSortFields(),
    }),
 );
};

My component is subscribed to the filters prop using mapStateToProps:

const mapStateToProps = (state: RootState) => ({
   filters: state.common.filter.filters,
});

Given that is the state of the problem I am facing, I tried to debug what happens by placing debug points in the code:

  1. When the action is dispatched (inside clearFilters function)
  2. Inside the reducer, where updated state is returned.
  3. When the network call is invoked (inside clearFilters function)
  4. In the refreshData call.

After reducer returns updated state, as per the debugging knowledge, store did not send the updated props right away. Rather, the control goes back to the next line i.e. this.refreshData() which make network call with old filters data. Only after the clearFilters function call finishes, in my componentDidUpdate, i can see that props update happen.

Does that signifies redux state change back to the store and eventually subscribed prop updates happen in an ASYNC way? If so, how does it happen? Does store sending the updated props executes in the main thread?

Any pointers/documentation would be really helpful.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source