Empty Array inside Redux Action map object - reactjs

Question

I'm getting an object from an action (using axios) and using a map function to iterate it.
I also need to get another action but inside the parent object mapped.
I see that the request/response are ok (with returned data), but the reducer variable still gets empty.
1: component gets data
componentDidMount() {
const { match: { params } } = this.props;
this.props.getSaleDetails(params.order_id);
}
2: defining mapStateToProps and mapDispatchToProps
const mapStateToPropos = state => ({
saleDetails: state.salesOrders.saleDetails,
saleDetailFurthers: state.salesOrders.saleDetailFurthers
});
const mapDispatchToProps = dispatch =>
bindActionCreators({ getSaleDetails, getDetailFurthers }, dispatch);
3: creating a const from the redux props
const detailsArray = saleDetails.data;
4: iterate array with map function
// getDetailFurthers is another action, getting data by passing "detail_id" and updating "saleDetailFurthers" props
{detailsArray && detailsArray.map((item) => {
const {getDetailFurthers, saleDetailFurthers} = this.props;
getDetailFurthers(item.detail_id)
console.log(saleDetailFurthers)
// empty array????
count++;
return (
<Paper className={classes.paper} key={item.detail_id}>
// ... next code lines
5: Actions
export function getDetailFurthers(detail_id){
return async dispatch => {
const request = await axios.get(`${BASE_URL}/salesorders/detail/furthers/${detail_id}`)
return {
type: "SALE_DETAIL_FURTHERS_FETCHED",
payload: request
}
}
}
6: Reducers
const INITIAL_STATE = {
//... others
saleDetailFurthers: []
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
///... other cases
case "SALE_DETAIL_FURTHERS_FETCHED":
return { ...state, saleDetailFurthers: action.payload }
default:
return state
}
};
I expect the "saleDetailFurthers" const be loaded with data from redux action.

Answer 1

You need to use dispatch instead of returning, like so:
dispatch({
type: "SALE_DETAIL_FURTHERS_FETCHED",
payload: request
});

Answer 2

export function getDetailFurthers(detail_id) => dispatch =>{
const request = await axios.get(`${BASE_URL}/salesorders/detail/furthers/${detail_id}`)
dispatch ({
type: "SALE_DETAIL_FURTHERS_FETCHED",
payload: request
})
}