Wait For The Result Of Dispatch (React-Redux)

Question

Lets say I have a function that calls an api and get user data ,

export function submitLogin({email, password})
{
return (dispatch) =>
    jwtService.signInWithEmailAndPassword(email, password)
        .then((user) => {
            debugger;
                dispatch(setUserData(user));

                return dispatch({
                    type: LOGIN_SUCCESS
                });
            }
        )
        .catch(error => {
            debugger;
            return dispatch({
                type   : LOGIN_ERROR,
                payload: error
            });
        });
 }

Now this is how I call this

  function handleSubmit(model)
{
    dispatch(authActions.submitLogin(model));
  
}

And Form

   <Formsy
            onValidSubmit={handleSubmit}
            onValid={enableButton}
            onInvalid={disableButton}
            ref={formRef}
            className="flex flex-col justify-center w-full"
        >

Now please let me know how can I read the type sent by dispatch (as soon it receive response from an Api) inside submitLogin function also I would like to redirect to url if type is LOGIN_SUCCESS

Answer 1

Try this way

function Example({ navigation }) {

  const redirectCallback = () => {
     // redirect here
     navigation.navigate('Your Route');
  }

  function handleSubmit(model)
    {
    dispatch(authActions.submitLogin( model, () => redirectCallback() ) );
  
    }

   return(
       <Formsy
            onValidSubmit={handleSubmit}
            onValid={enableButton}
            onInvalid={disableButton}
            ref={formRef}
            className="flex flex-col justify-center w-full"
        >
    )
}




export function submitLogin({email, password}, callback)
{

 
return (dispatch) =>
    jwtService.signInWithEmailAndPassword(email, password)
        .then((user) => {
            debugger;
                dispatch(setUserData(user));

                return dispatch({
                    type: LOGIN_SUCCESS,
                    callback: callback;  // send callback here  
                });
            }
        )
        .catch(error => {
            debugger;
            return dispatch({
                type   : LOGIN_ERROR,
                payload: error
            });
        });
 }

Create reducer and handle type LOGIN_SUCCESS

const reducer = (state = { isLoggedIn: false }, action) => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      action.callback(); call here
      return state;

    default:
      return state;
  }
};

Answer 2

const handleSubmit = async (model) => {
    await dispatch(authActions.submitLogin(model));
}

export submitLogin = ({email, password}) => {
    return async (dispatch) =>
        await jwtService.signInWithEmailAndPassword(email, password)
        .then((user) => {
            debugger;
                dispatch(setUserData(user));

                return dispatch({
                    type: LOGIN_SUCCESS
                });
            }
        )
        .catch(error => {
            debugger;
            return dispatch({
                type   : LOGIN_ERROR,
                payload: error
            });
        });
 }