Empty Array inside Redux Action map object

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
    })
}