score:3
Accepted answer
The problem is you return a function NOT a promise.
This resolves immediately.
See working code sample
export const fetchData2 = dispatch => () => {
dispatch({type: 'START_FETCH'})
const p = [
fetchDataSetOne(dispatch),
fetchDataSetTwo(dispatch)
];
Promise.all(p).then((res) => setHasLoaded(res));
};
// this returns a promise AFTER it calls an action
const fetchDataSetOne = dispatch => {
return axois.get(`${API_URL}/dataSetOne`).then(res => {
dispatch({
type: "FETCH_ALL_DATA_SET_ONE",
payload: res.data.docs
});
});
};
This resolves after both promises are resolved, but the state updates after each promise is resolved. To update state after all promises resolve, try this:
export const fetchData3 = dispatch => () => {
dispatch({ type: "START_FETCH" });
const p = [
axois.get(`${API_URL}/dataSetOne`),
axois.get(`${API_URL}/dataSetTwo`)
];
Promise.all(p).then(callActions(dispatch));
};
const callActions = dispatch => res => {
dispatch({
type: "FETCH_ALL_DATA_SET_ONE",
payload: res[0].data.docs
});
dispatch({
type: "FETCH_ALL_DATA_SET_TWO",
payload: res[1].data.docs
});
setHasLoaded(res);
};
Source: stackoverflow.com
Related Query
- React Redux - Wait until data is loaded
- React | Redux | Thunk - How data should be loaded from within a component?
- How to wait until redux prepares necessary data
- How to wait until object is fully loaded when fetching with async/await in React
- How to make react to wait until api data is retrieved
- Wait Until Data is Fetched from MongoDB React JS
- Where do I fetch initial data from server in a React Redux app?
- How to cache fetched data in react without redux
- Async data flow in React App with Redux + ReactRouter?
- How to wait until React component completely finished updating in Jest and/or Enzyme?
- Redux in React Native app is very slow with lots of data
- react redux useSelector rerender even when data does not change
- Should i fetch data in react component or redux action?
- Wait for API call data before render react hooks
- Pass data between independent component react and redux
- Redux - how to call an action and wait until it is resolved
- (Universal React + redux + react-router) How to avoid re-fetching route data on initial browser load?
- React: Wait until all assets are loaded
- React hooks - wait until the state has been updated
- React Hooks: how to wait for the data to be fetched before rendering
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- Server rendered React ExpressJS frontend leaking users' Redux store data
- How to wait until context value has been set | React Hooks
- How to wait for a Redux action to change state from a React component
- How to redirect to 404 if no data from external API (universal React + Redux app)?
- How to wait for data in redux
- redux react strategy with async data and interaction
- Content doesn't change when back/forward made on browser with state data in React + Redux
- react redux assign data to component
- How to make React component wait for redux store variables to get set?
More Query from same tag
- React Todo Checkbox Styles all listed items at once
- OpenSeadragon missing prop in types definition
- TypeError: Cannot read property 'label' of undefined React
- How to allow user to save inputs for further review
- TinyMCE Self-hosted with React
- How to make a button within a Link not trigger Link redirect
- React-Redux-Saga action payload undefined in reducer
- Can you, or should you use localStorage in Redux's initial state?
- How do I pass Redux props to a separate component in a different Route with React Router v4?
- How use async return value from useEffect as default value in useState?
- Component not re-rendering when state is changed
- Webpack is not parsing the jsx file
- why is my component getting rendered once but then failing on refresh
- How to remove Header from a single page in NextJS Layout?
- how to add a circled image Reactjs
- `ref` issue with react-bootstrap elements
- Displays [object Object] instead of label name
- React - Redux with Immer.js
- using react tooltip with styled components
- How to set useState initial value of object which is already in my fake data?
- How to modify the wrapper css rule of a Tabs component to make the text aligned to the left in a vertical tab in Material-UI?
- unable to parse API value
- TypeError: headers[key].trim is not a function
- What is difference between reactstrap and react-bootstrap?
- I can't get npm start to run
- How to clearInterval on componentWillUnmount() correctly in react?
- Pass const present in other function as a props | React class component
- Mock Fetch API in unit test onClick method in React
- Parameters not being passed to server router
- How to remove item from array using localStorage.removeItem?