I am unable to dispatch two actions together in react thunk - react-native

Question

I am fetching two APIs in parallel and I want to render the data together but I am unable to render the data from the second API.
I am attaching the expo link of the project.
https://snack.expo.dev/#keshav1973/thunk

Answer 1

Let minify fetchUsers function as below
const getLinksDataPromises = async ()=> {
const links = ["https://jsonplaceholder.typicode.com/users","https://jsonplaceholder.typicode.com/posts"]
return links.map( async link=> {
const response = await fetch(link)
const data = await response.json()
return data
})
}
export const fetchUsers = () => {
return async dispatch => {
dispatch(getUsersRequest());
const promises = await getLinksDataPromises()
const results = await Promise.all(promises);
const users = results[0]
const posts = results[1]
dispatch({ type: 'GET_USERS_SUCCESS', payload: users})
dispatch({ type: 'GET_POSTS_SUCCESS', payload: posts})
};
};
The issue was not copying the previous state value before you update the new value. That's why the second dispatch clear the previous dispatched value.
Updated reducer function
const initialState = {
users: [],
posts: [],
loading: false,
error: null,
};
const users = (state = initialState, action) => {
console.log({action})
switch (action.type) {
case 'GET_USERS_REQUEST':
return {...state, loading: true};
case 'GET_USERS_SUCCESS':
return {...state,loading: false, users: action.payload};
case 'GET_USERS_FAILURE':
return {...state,loading: false, error: action.payload};
case 'GET_POSTS_SUCCESS':
return {...state,loading: false, posts: action.payload,}
default:
return state;
}
};
export default users;
You can test working example here
https://snack.expo.dev/#emmbyiringiro/230e21