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.