Unable to synchronise store dispatch from loop

17 Views Asked by At

Dispatching action from for loop is not getting synchronised. Here are the code snippets:

Component:

function mapStateToProps(state) {
  return {
    downloads: state.downloads
  }
}

function mapDispatchToProps(dispatch, props) {

}

export class ProgressBarIndicator extends Component {
  componentDidUpdate = () => {
    console.log(this.props.downloads.requestCount);
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ProgressBarIndicator);

Action Dispatch:

export function processFetchPlan(plans) {
  return function (dispatch, getState) {
    Object.keys(fetchPlans).forEach((fetchObjectName) => {
      dispatch(_getPrefetchPending(fetchObjectName));
      ...........
    };
  }
}

function _getPrefetchPending(objectName) {
  return {
    type: types.DOWNLOAD_DATA_PENDING,
    meta: {
      objectName,
    },
  };
}

Action Handler:

import Immutable from 'seamless-immutable';

const ACTION_HANDLERS = {
  [types.DOWNLOAD_DATA_PENDING]: (state, action) => {
    return Immutable.update(state, 'downloads', (downloads) => downloads.merge({
      requestCount: (downloads.requestCount || 0) + 1,
    }, { deep: true }));
  };
}

With this code, console log is printing the last count for requests. Support fetch plan has 10 objects, so it's printing 10, 10 times, instead it should print 1,2,3.....10.

0

There are 0 best solutions below