组件不显示更新的Redux状态

Question

I have a Meals page with meal cards that toggles a modal with details about the clicked meal when the card is clicked:

{
  this.props.filteredMeals.map(m => {
    return (
      <div onClick={() => this.props.toggleMealModal(m)} key={m.id}>
        <MealCard meal={m} />
      </div>
    )
  })
}

toggleMealModal(meal) updates the meal inside my redux store.

meal: {
  description: "Marre des sashimis de thon ou de saumon ? Tentez le maquereau!",
  fees: "80",
  id: 27,
  ingredients: "maquereau cru",
  name: "Sashimi de maquereau",
  no_fees_price: 599,
  original_price: 850,
}

inside my MealModal I have a PaymentContainer child component that also mounts when the modal is toggle and calls an action:

componentDidMount() {
    this.props.getUserCredit(this.props.meal.no_fees_price, this.props.meal.fees);
  } 

where this.props.meal is fetched from my redux store via mapStateToProps .

the getUserCredit() is the following action:

export const getUserCredit = (noFeesPrice, fees) => {
  return dispatch => {
    axios.get('/get_user_credit')
    .then(res => {
      dispatch(setUserCredit(parseInt(res.data.credit) / 100));
      parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit) < 0 ?
        dispatch(setMealPrice(0, (parseInt(noFeesPrice) + parseInt(fees)) / 100))
        :
        dispatch(setMealPrice((parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit)) / 100, parseInt(res.data.credit) / 100)
          );
    })
    .catch(err => console.log(err));
  }
}

and then a child component displays the mealPrice , fetched from the redux store (and supposedly updated by getUserCredit() ).

The problem is: the very first clicked meal card displays nothing at this.props.mealPrice , and when other cards are clicked and the modal mounts, this.props.mealPrice displays the price from the previously clicked meal card.

How can I change my code so that the right price mounts with the right meal ?

EDIT: relevant reducers and action creator code :

export const setUserCredit = (credit = 0) => ({
  type: SET_USER_CREDIT,
  payload: { credit }
});

export const setMealPrice = (mealPrice = null, amountOff = 0) => ({
  type: SET_MEAL_PRICE,
  payload: { mealPrice, amountOff }
});

---

case SET_USER_CREDIT: {
  return {
    ...state,
    credit: action.payload.credit
  }
}
case SET_MEAL_PRICE: {
  return {
    ...state,
    amountOff: action.payload.amountOff,
    mealPrice: action.payload.mealPrice
  }
}

Answer 1

I recommend you to use status indicators while working with APIs.

Very simplified, you could build some action creators like:

const getUserCreditStart = () => ({
  type: GET_USER_CREDIT_START,
});

const getUserCreditSuccess = () => ({
  type: GET_USER_CREDIT_SUCCESS,
});

const getUserCreditError = payload => ({
  type: GET_USER_CREDIT_ERROR,
  payload,
});

In your getUserCredit function you can then dispatch these actions accordingly:

export const getUserCredit = (noFeesPrice, fees) => (dispatch) => {
    dispatch(getUserCreditsStart());
    return axios.get('/get_user_credit')
      .then(res => {
        dispatch(setUserCredit(parseInt(res.data.credit) / 100));
        parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit) < 0
        ? dispatch(setMealPrice(0, (parseInt(noFeesPrice) + parseInt(fees)) / 100))
        : dispatch(setMealPrice((parseInt(noFeesPrice) + parseInt(fees) - parseInt(res.data.credit)) / 100, parseInt(res.data.credit) / 100));
    })
    .then(() => dispatch(getUserCreditSuccess()))
    .catch(err => dispatch(getUserCreditError(err)))
}

And then, you need to add them to a reducer. Btw. typeToReducer might be a good choice here. :)

In the reducer you need to set the status on the different actions that got dispatched.

const initialState = {
  status: 'INITIAL',
};

...

case GET_USER_CREDIT_START: {
  return {
    ...state,
    status: 'START',
  }
}

case GET_USER_CREDIT_SUCCESS: {
  return {
    ...state,
    status: 'SUCCESS',
  }
}

case GET_USER_CREDIT_ERROR: {
  return {
    ...state,
    status: 'ERROR',
    error: action.payload,
  }
}

Well, and in your PaymentContainer component you then can wait for the answer and show a loading bar while you are waiting (the status information you get with mapStateToProps like you do with the results). In case of an error, you are able to display the error as well.