Data is lost somewhere in action wiring

Question

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.

Hi! Usually this type of errors are easily sorted out with help of a debugger, You could just set breakpoints in all critical points of your code and see how the flow goes.. — Daniel Khoroshko, Jan 14 '18 at 05:41
Also, I'm not quite familiar with thunk (prefer to write middleware instead), but shouldn't this line `return registerUser(email, password, history, dispatch);` be more like `dispatch({ type: 'REGISTER_USER, payload: { email, password, history } })` ? It seems a bit strange to see dispatch as an argument of action creators. Also, btw, there is no need to pass history to actions creators, because dispatch router actions as well (react-redux-router), otherwise they become to smart, action creators I mean — Daniel Khoroshko, Jan 14 '18 at 05:49

RIYAJ KHAN · Accepted Answer · 2018-01-14T06:56:56.040

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);
        });
      };
    };

Data is lost somewhere in action wiring

1 Answers1