Search code examples
reactjsfirebasereduxfirebase-authenticationredux-async-actions

Data is lost somewhere in action wiring


I have a simple registration form with fields for email, password, and admin code. I am passing this data into my action creator and I have it passing through three actions before finishing up the registration. Somewhere in there, it is just stopping. It returns no errors. Here is my code.

export const checkAdminCode = ({ email, password, adminCode }, history) => {
  return (dispatch) => {
    dispatch({ type: CHECK_ADMIN_CODE });

    firebase.database().ref('/env/adminCode').once('value', (snapshot) => {
      if (snapshot.val() === adminCode) {
        return registerUser(email, password, history, dispatch);
      }

      return loginUserFail(dispatch);
    });
  };
};

const registerUser = (email, password, history, dispatch) => {
  return (dispatch) => {
    dispatch({ type: REGISTER_USER });

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((user) => loginUserSuccess(dispatch, history, user))
      .catch((err) => loginUserFail(dispatch, err));      
  };
};

const loginUserSuccess = (dispatch, history, user) => {
  history.push('/admin/dashboard');
  dispatch({
    type: LOGIN_USER_SUCCESS,
    paylaod: user
  });
};

A few things to note:

  • if (snapshot.val() === adminCode) { does work.
  • Before I added the admin code, I had the form submit fire straight to registerUserand it worked.
  • I placed a few console.logs to try to find exactly where the breakdown was happening. Upon testing the following code:

    const registerUser = (email, password, history, dispatch) => {
      console.log('test1');
      return (dispatch) => {
        console.log('test2');
        dispatch({ type: REGISTER_USER });
    
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then((user) => loginUserSuccess(dispatch, history, user))
          .catch((err) => loginUserFail(dispatch, err));      
      };
    };
    

console.log('test1'); worked, console.log('test2'); didn't work.

Once again, it's returning no error, so I don't know how else to describe what's going on or what to search.

Please help. Thanks in advance.


Solution

  • registerUser is async redux action,you need to call it with dispatch.

    You don't need to pass dispatch explicitaly to invoking function.

    It will passed implicitely by redux.

    export const checkAdminCode = ({ email, password, adminCode }, history) => {
          return (dispatch) => {
            dispatch({ type: CHECK_ADMIN_CODE });
    
            firebase.database().ref('/env/adminCode').once('value', (snapshot) => {
              if (snapshot.val() === adminCode) {
    
                dispatch (registerUser(email, password, history));
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    
              }
    
              return loginUserFail(dispatch);
            });
          };
        };