I've seen a number of posts covering similar chaining questions, but I'm trying to understand what I'm specifically missing.
Ultimately, I want to make an API call, then make a second based on the results of the first. To do so, of course, I need to have the results, not just a promise to get them before I make the chained call. I started from an example that does not have the chaining dependency:
export const FetchUserSync = () => {
return Promise.all([
fetchUsers(),
fetchPosts()
]).then(([user, posts]) => {
return { user, posts };
});
function fetchUsers()...
function fetchPosts()...
}
When I call it, the data comes back and state values are set.
useEffect(() => {
dataPromise.then(data => {
setUser(data.user);
setPosts(data.posts);
});
Attempting to change the first code so the second call will wait for the first to complete, I get results in the function (console.log or setting debbugger shows populated objects for user and posts exist), but the useEffect's calling function shows the result to be undefined.
export const FetchUserSync = () => {
return Promise.all([fetchUsers()])
.then(([user]) => {
Promise.all([user, fetchPosts()])
.then(([user, posts]) => {
return { user, posts }
})
});
function fetchUsers()...
function fetchPosts()...
}
Any suggestions on how to make the second idea work or should I just scrap it and go with one of the other answers?
In this case, you wouldn't want to use Promise.all.
Since both fetchUsers and fetchPosts both return promises already, wrapping singular calls with Promises for fetchUser and fetchPosts is an anti-pattern.
Additionally, consider using async/await since they avoid deeply nested chains of data.
Here's what you could do:
export const FetchUserSync = async () => {
const users = await fetchUsers();
const posts = await fetchPosts();
function fetchUsers() { ... }
function fetchPosts() { ... }
return { users, posts }
}
The code will make a request for users, then once users is received, it will make another call for posts.
Consider reading more on async/await: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
Related
I have two functions that run asynchronously getting data from the API. Both of them are called from their own useEffect().
I have a third function that needs to run once those two functions have been fully completed.
How can this be accomplished?
Edit:
Both of the async functions look like this:
useEffect(() => {
fetchBudgetBucketsData();
}, [fiscalYear]);
useEffect(() => {
fetchBudgetBucketsData();
}, [fiscalYear]);
const fetchBudgetsData = async () => {
setIsFetchingBudgets(true);
const res = await getBudgets(orgID, `${parseInt(fiscalYear)}`, '', budgetType);
setIsFetchingBudgets(false);
if (isErrorResponse(res)) {
console.warn(res.details);
message.error(res.displayText);
return;
}
setBudgets(res.budgets);
};
const fetchBudgetBucketsData = async () => {
setIsLoadingBudgetBuckets(true);
if (orgID === undefined) {
return;
}
const res = await getBudgetBuckets(orgID, fiscalYear);
setIsLoadingBudgetBuckets(false);
if (isErrorResponse(res)) {
console.warn(res.details);
message.error(res.displayText);
return;
}
setBudgetBuckets(res.buckets);
};
Whenever the budget data or bucket data is updated, I want to call another function that checks for errors. However when the page loads, I need it to wait for both of those functions to be finished before it checks for errors.
Edit #2:
After some debugging, it looks like the issue might have to do with when React updates the state. Since I am trying to check for errors in data saved in the state.
One way could be chaining Promises.
Promise.all([ApiCall1, ApiCall2])
// At this point two promises above will be resolved
.then(() => ApiCall3)
Read more
I discovered the issue was caused by how React chooses when to update the state and not how I was calling these functions asynchronously.
I was able to call my Error check function by hooking it into the output of the data fetch calls. This makes sure that the error check only runs when either the budgets or buckets are edited and finished being changed.
useEffect(() => {
getWarningsAndErrors();
}, [budgets, budgetBuckets]) //Update errors whenever we edit budgets or buckets
I'm having issue fetching data and setting them to state in a functional component using useEffect and useState.
My problem is that I would like to keep the data fetching done with axios async/await in a separate file for improving application scalability but then I don't understand how to update the state in case the promise is resolved (not rejected).
In particular I'm trying to retrieve from the promise an array of table rows called data in state, but I can't figure out how to set the result of the responce in the state
Here's the code in the component file:
const [data, setData] = React.useState([]);
useEffect(() => {
const { id } = props.match.params;
props.getTableRows(id).then((res) => {
setData(res);
});
//or is it better:
//props.getTableRows(id).then(setData); ?
}, []);
and my action.js:
export const getTableRows = (id, history) => async (dispatch) => {
try {
const res = await axios.get(`/api/test/${id}`);
dispatch({
type: GET_TEST,
payload: res.data.rows,
});
} catch (error) {
history.push("/test");
}
};
In the above picture it can be seen that the rows array inside the promise response called in action.js is present.
This code unfortunately doesn't work, error: Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
I've found out another solution which is the define the promise in the useEffect method like this:
useEffect(() => {
const { id } = props.match.params;
const fetchData = async () => {
const result = await axios.get(`/api/test/${id}`);
setData(result.data.rows);
};
fetchData();
}, []);
this code is working in my app but as I said I don't like having the promises in the components files I would like instead to have them all the promise in action.js for app scalability (in case url change I don't have to change all files) but in that case I don't know where to put the setData(result.data.rows); which seems the right choise in this last example
Any suggestions?
Thanks
You still need to use async/await. The .then() is executed when the value is returned, however your function will continue rendering and won't wait for it. (causing it to error our by trying to access forEach on a null state). After it errors the promise via .then() will update the values and that is why you can see them in the console.
useEffect(() => {
async function getData() {
const { id } = props.match.params;
await props.getTableRows(id).then((res) => {
setData(res);
});
}
getData()
}, []);
Additionally, before you access a state you can check for null values (good practice in general).
if (this.state.somestate != null) {
//Run code using this.state.somestate
}
I don't see you return anything from getTableRows. You just dispatch the result, but hadn't return the res for the function call.
And it will be helpful if you provided error trace.
I have no issues fetching the data from an API using useEffect. That works fine.
The problem is that I need to apply some processing to the data before I actually render it out (in this case, I need to shuffle the array that I receive).
I tried a million different ways, but I just can't find the right place to write that logic. Basically, it won't work anywhere.
What is the right way of going about this?
you can do everything with data before setState.
is useEffect when you fetched data from Api, shuffle it and then do setState.
little example:
useEffect(() => {
axios.get("http://example.com/data").then(response => {
const data = shuffle(response.data);
setState(data);
})
});
useEffect(() => {
const fetchData = async () => {
await axios.get("http://example.com/data").then(response => {
const data = shuffle(response.data);
setState(data);
});
};
fetchData();
return () => {
// Clean up func
}
}, []); //[] will prevent infinite API calling.
I have made some research about possible ways to do it, but I can't find one that uses the same architecture like the one in the app I'm working on. For instance, React docs say that we should have a method which makes the HTTP request and then calls actions in different points (when request starts, when response is received, etc). But we have another approach. We use an action which makes the HTTP call and then dispatches the result. To be more precise, my use case is this:
// action to get resource A
getResourceA () {
return dispatch => {
const result = await axios.get('someLink');
dispatch({
type: GET_RES_A,
payload: result
});
};
}
// another action which needs data from resource A
getSomethingElseByIdFromA (aId) {
return async dispatch => {
const result = await axiosClient.get(`someLink/${aId}`);
dispatch({
type: GET_SOMETHING_BY_ID_FROM_A,
payload: result
});
};
}
As stated, the second action needs data from the first one.
Now, I know of two ways of doing this:
return the result from the first action
getResourceA () {
return async dispatch => {
const result = await axios.get('someLink');
dispatch({
type: GET_RES_A,
payload: result
});
return result;
};
}
// and then, when using it, inside a container
async foo () {
const {
// these two props are mapped to the getResourceA and
// getSomethingElseByIdFromA actions
dispatchGetResourceA,
dispatchGetSomethingElseByIdFromA
} = this.props;
const aRes = await dispatchGetResourceA();
// now aRes contains the resource from the server, but it has not
// passed through the redux store yet. It's raw data
dispatchGetSomethingElseByIdFromA(aRes.id);
}
However, the project I'm working on right now wants the data to go through the store first - in case it must be modified - and only after that, it can be used. This brought me to the 2nd way of doing things:
make an "aggregate" service and use the getState method to access the state after the action is completed.
aggregateAction () {
return await (dispatch, getState) => {
await dispatch(getResourceA());
const { aRes } = getState();
dispatch(getSomethingElseByIdFromA(aRes.id));
};
}
And afterward simply call this action in the container.
I am wondering if the second way is all right. I feel it's not nice to have things in the redux store just for the sake of accessing them throughout actions. If that's the case, what would be a better approach for this problem?
I think having/using an Epic from redux-observable would be the best fit for your use case. It would let the actions go throughout your reducers first (unlike the mentioned above approach) before handling them in the SAME logic. Also using a stream of actions will let you manipulate the data throughout its flow and you will not have to store things unnecessary. Reactive programming and the observable pattern itself has some great advantages when it comes to async operations, a better option then redux-thunk, sagas etc imo.
I would take a look at using custom midleware (https://redux.js.org/advanced/middleware). Using middleware can make this kind of thing easier to achieve.
Something like :
import {GET_RESOURCE_A, GET_RESOURCE_B, GET_RESOURCE_A_SUCCESS, GET_RESOURCE_A_ERROR } from '../actions/actionTypes'
const actionTypes = [GET_RESOURCE_A, GET_RESOURCE_B, GET_RESOURCE_A_SUCCESS, GET_RESOURCE_A_ERROR ]
export default ({dispatch, getState}) => {
return next => action => {
if (!action.type || !actionTypes.includes(action.type)) {
return next(action)
}
if(action.type === GET_RESOURCE_A){
try{
// here you can getState() to look at current state object
// dispatch multiple actions like GET_RESOURCE_B and/ or
// GET_RESOURCE_A_SUCCESS
// make other api calls etc....
// you don't have to keep stuff in global state you don't
//want to you could have a varaiable here to do it
}
catch (e){
} dispatch({type:GET_RESOURCE_A_ERROR , payload: 'error'})
}
}
}
Hi I'm new to the react/redux development environment so I appreciate any help.
I'm trying to make 2 API calls asynchronously when componentDidMount by calling dispatch(fetchAllPositions(selectedUserDivision)) in my app.js
I found a suggested method in this post and the fetchAllPositions function wraps two action functions together in a Promise.all
export function fetchAllPositions(division) {
return dispatch => Promise.all([
dispatch(fetchUserPositionsIfNeeded(division)),
dispatch(fetchDefaultPositionsIfNeeded(division))
])
.then(console.log("fetched both"))
}
The two action functions are nearly identical, they just call a slightly different API url. One of them looks like the follows, where the shouldFetchUserPosition is just a pure function that returns a boolean:
function fetchUserPositions(division) {
return dispatch => {
const url = apiOptions.server + `/api/user/position?division=${division}`
dispatch(requestUserPositions(division))
return fetch(url, options)
.then(response => response.json())
.then(json => dispatch(receiveUserPositions(division,json)),
err => console.log(err))
}
}
export function fetchUserPositionsIfNeeded(division) {
return (dispatch, getState) => {
if (shouldFetchUserPositions(getState(), division)) {
return dispatch(fetchUserPositions(division))
} else {
return Promise.resolve()
}
}
}
The logic is that for an update, a REQUEST... action is sent while pulling data, then a RECEIVE... action is sent when data is ready to be updated into the new state.
The trouble is that the Promise.all should wait for REQUEST1 REQUEST2 RECEIVE1 RECEIVE2 to all come in before doing the .then(console.log("fetched both"))
Right now, it's does the .then after first 2 REQUEST are finished, not waiting for the 2 RECEIVE to come in.
I suspect it's the nested nature of the requestUserPositions() within the function that wraps fetch()
The REQUEST action is a simple function, and in the reducer it just flips an isFetching property to true:
function requestUserPositions(division) {
return {
type: REQUEST_USER_POSITIONS,
division
}
}
Sorry for this long issue but I'd appreciate any suggestions.
This is a careless mistake
Turns out that when the .then() is wrapped inside a dispatch it gets executed simultaneously as the Promise.all() is being carried out.
The intended dispatch order was created by tagging the then(()=>console.log to the last dispatch dispatch(fetchAllPositions(selectedUserDivision)) done from ComponentDidMount