Component is not updating when redux state changes

Question

I have a react component with a selector that gets some state from a firebase database. However, in the useEffect of my component that has this state as a dependency, it only ever returns an empty array even though the Redux dev tools shows me that the state has updated. The console also prints the empty array but when I expand it the array is updated. What could be happening?

Minimal version of my component:

const PatientsPage = () => {
  const dispatch = useDispatch();
  const invitedPatients = useSelector((state) => state.invitations.invitedPatients);

  useEffect(() => {
    console.log("in use effect invited patients", invitedPatients);
    // console prints empty array but when I expand it
    // it is populated yet this function isn't triggered again to set the new value for rendering
  }, [invitedPatients]);

  useEffect(() => {
    // this dispatches the invitedPatients action
    dispatch(getInvitations(firebase.auth().currentUser.uid));
  }, []);

}

I don't know what the issue is. I can post my action and reducer functions if needed. Please provide some guidance as to how I can diagnose the problem. Thanks

EDIT: here is the action

export const getInvitations = (doctorId) => {
  const invitationObjects = [];
  const invitedPatients = [];
  return async (dispatch, getState, getFirebase) => {

     ...code to populate my invitationsObjects

      invitationObjects.forEach(async (invitationObject) => {
        const invitedPatient = await getPatient(invitationObject.patientId);
        invitedPatients.push(invitedPatient);
      });

      dispatch({
        type: GET_INVITATIONS_SUCCESS,
        payload: invitedPatients,
      });
    } catch (error) {
      ...
    }
  };
};

And the reducer

const initialState = {
  invitedPatients: null,
  sending: false,
};

export default function invitationsReducer(state = initialState, action) {
  switch (action.type) {
    case "GET_INVITATIONS_SUCCESS":
      return {
        ...state,
        invitedPatients: action.payload,
      };
    
    default:
      return { ...state };
  }
}

This is the getPatient function:

export const getPatient = async (patientId) => {
  try {
    const documentSnapshot = await firestore.collection("patients").doc(patientId).get();
    console.log("getPatient -> documentSnapshot", documentSnapshot.data())
    return documentSnapshot.data();
  } catch(error) {
    console.log(error);
  }
}

We need to see your `getInvitations` action and your reducer to know what it's doing. If you're mutating your array instead of setting it to a new value, then the object reference of the Array will be the same and that won't be detected as a change. — Jacob, Oct 23 '20 at 17:58
You may be mutating the state in your action,, can you show your action please? — Saher Elgendy, Oct 23 '20 at 18:06
@SaherElgendy Because my getPatient is an async function. It retrieves it from a database — dazzaondmic, Oct 23 '20 at 18:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223525/discussion-between-dazzaondmic-and-saher-elgendy). — dazzaondmic, Oct 23 '20 at 18:19
[This](https://stackoverflow.com/q/37576685) is the problem. Your `forEach()` loop does not block the async function's control flow until the asynchronous callbacks are completed, it just returns immediately. — Patrick Roberts, Oct 23 '20 at 18:32
I just found out and answered it myself. Is there any way I can give you the correct answer? — dazzaondmic, Oct 23 '20 at 18:33

score 0 · Answer 1 · answered Oct 23 '20 at 18:32

0

The problem is that you can't use an async function in a forEach loop. I changed it to use normal loop notation and it worked.

answered Oct 23 '20 at 18:32

dazzaondmic

345
4
14

You don't need to fetch in series though, you can fetch your data in parallel if you look at [this answer](https://stackoverflow.com/a/37576787). – Patrick Roberts Oct 23 '20 at 18:33

Component is not updating when redux state changes

1 Answers1