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.

tried to use SALE_DETAIL_FURTHERS_FETCHED instead "SALE_DETAIL_FURTHERS_FETCHED" in Reducer and your Action — Nirina-aj
– Nirina-aj, Commented Jul 8, 2019 at 18:12

Lawynn Jana · Accepted Answer · 2019-07-09 04:12:34Z

0

You need to use dispatch instead of returning, like so:

dispatch({
  type: "SALE_DETAIL_FURTHERS_FETCHED", 
  payload: request
});

answered Jul 9, 2019 at 4:12

Lawynn Jana

881 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caio Over a year ago

It worked. But it caused an infinite loop request (axios.get).

Lawynn Jana Over a year ago

So when your component first renders it will map over detailsArray and the callback function will call the action creator getDetailFurthers() to fetch data. Once getDetailFuthers() completes the axios call, it will change the redux state and thus cause a re-render of your component since your component is connected to "saleDetailFurthers". Since your component re-renders it will map over detailsArray again and then call getDetailFurthers() and so an infinite loop will happen.

Anvesh Checka · Accepted Answer · 2019-11-21 13:19:15Z

0

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

edited Nov 21, 2019 at 13:19

Anvesh Checka

3,8353 gold badges23 silver badges28 bronze badges

answered Nov 21, 2019 at 4:52

Aditya V

5782 gold badges8 silver badges18 bronze badges

1 Comment

Anvesh Checka Over a year ago

Dispatch expects an object. Correct your answer.

Collectives™ on Stack Overflow

Empty Array inside Redux Action map object

1: component gets data

2: defining mapStateToProps and mapDispatchToProps

3: creating a const from the redux props

4: iterate array with map function

5: Actions

6: Reducers

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1: component gets data

2: defining mapStateToProps and mapDispatchToProps

3: creating a const from the redux props

4: iterate array with map function

5: Actions

6: Reducers

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related