addOrder = (event) => {
this.props.dispatch({
type: 'POST_ORDER',
payload: this.state.newOrder,
});
this.props.dispatch({
type: 'GET_ORDER_DETAILS',
payload: this.props.store.orders.length + 2,
});
this.props.history.push(`/orders/${this.props.store.orders.length + 2}`);
};
function* postOrder(action) {
try {
yield put({ type: 'ERROR_RESET' });
yield axios.post('/api/orders', action.payload);
yield put({
type: 'GET_ALL_ORDERS',
});
} catch (err) {
console.log(err);
yield put({
type: 'ERROR_MSG',
payload: "Sorry we couldn't save your order. Please try again.",
});
}
}
function* getOrderDetails(action) {
try {
yield put({ type: 'ERROR_RESET' });
const response = yield axios.get(`/api/orders/${action.payload}`);
yield put({
type: 'SET_ORDER_DETAILS',
payload: response.data,
});
} catch (err) {
console.log(err);
yield put({
type: 'ERROR_MSG',
payload: 'There was a problem loading order. Please try again.',
});
}
}
My main problem is when the addOrder is fired POST_ORDER doesn't finish by the time GET_ORDER_DETAILS fires. My goal is that the POST_ORDER will finish, then the dispatch to GET_ORDER_DETAILS should fire and when the page redirects the new data is there.
Right now GET_ORDER_DETAILS is firing off before the first dispatch is finished resulting in undefined data when it redirects. Sorry I'm new to react and redux and I've been googling trying to find a solution but not having much luck. Any help and pointing me in the right direction to tackle this would be greatly appreciated. Thanks