react-native collections reducers flatlist redux-firestore

React Native fecth data from firestore then dispatch not working-Dispatch empty array

I am trying to developp my 1st React Native app but I am bloqued with store/fetching data from firestore.

The problem is that is dispatch before fetching all data from firestore so my filteredProfiles array is empty and my flat list in my screen is so empty too.

what should I modify? If someone could help me, i will appreciate..Thanks!!

here is my code in my screen:

ProfilesListScreen.js

const ProfilesListScreen = props => {   
  const connectedUser = useSelector(state => state.profiles.user); 
  const filteredProfiles = useSelector(state => state.profiles.filteredProfiles)

    const dispatch = useDispatch();

    useEffect(() => {
      dispatch(fetchProfiles()); 
      }, [dispatch]);

My profilesAction.js in my store :

export const fetchProfiles= () => {

    
    const loadedProfiles = [ ];

    return async dispatch => {               
        

        await firebase.firestore().collection('users')
        .get()
        .then((profileSnapShot) => {            
            profileSnapShot.forEach((doc) => {               
                const firstname=  doc.get("firstname");
                const birth = doc.get("birth");
                const age = getAge(birth.seconds);
                const sex = doc.get("sex");                 
                const newProfile= new profile(doc.id, firstname,age, "https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
                
                loadedProfiles.push(newProfile); 
               
                
            }); 
        })

         dispatch({ type: SET_PROFILESLIST, profilesList: loadedProfiles } ) ;
        

    };

and my reducer profiles.js

case SET_PROFILESLIST:
          const newProfilesList = action.profilesList;
           return { 
            filteredProfiles : newProfilesList,
           };

Solution

Have a try by updating the code for fetchProfiles as below this might help you with your issue.

export const fetchProfiles= () => {
    const loadedProfiles = [];
    return async dispatch => {               
        const profileSnapShot = await firebase.firestore().collection('users').get()
        profileSnapShot.forEach((doc) => {               
            const firstname=  doc.get("firstname");
            const birth = doc.get("birth");
            const age = getAge(birth.seconds);
            const sex = doc.get("sex");                 
            const newProfile= new profile(doc.id, firstname,age, "https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
            loadedProfiles.push(newProfile); 
        });
        dispatch({ type: SET_PROFILESLIST, profilesList: loadedProfiles });
    }
};