how to redirect back to login after creating an account in redux saga?

Question

im new to redux-saga, and i'm not very sure why can't i be redirected back to login page after creating an account? i've included the necessary codes to enable the redirection but i'm always given a blank page upon signing up.

action.js

export const registerUser = (user, history) => ({
  type: REGISTER_USER,
  payload: { user, history },
});
export const registerUserSuccess = (user) => ({
  type: REGISTER_USER_SUCCESS,
  payload: user,
});
export const registerUserError = (message) => ({
  type: REGISTER_USER_ERROR,
  payload: { message },
});

reducer.js

export default (state = INIT_STATE, action) => {
  switch (action.type) {
    case REGISTER_USER:
      return { ...state, loading: true, error: '' };
    case REGISTER_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        currentUser: action.payload,
        error: '',
      };
    case REGISTER_USER_ERROR:
      return {
        ...state,
        loading: false,
        currentUser: null,
        error: action.payload.message,
      };
  }
};

saga.js

const registerWithEmailPasswordAsync = async (email, password, username) => {
  const data = await axios.post(
    `${baseUrl}auth/signup`,
    { username, password, email },
    { headers }
  );
  return data;
};

function* registerWithEmailPassword({ payload }) {
  const { email, password, username } = payload.user;
  const { history } = payload;
  try {
    const registerUser = yield call(
      registerWithEmailPasswordAsync,
      email,
      password,
      username
    );
    if (!registerUser.message) {
      const item = { uid: registerUser.user.uid, ...currentUser };
      setCurrentUser(item);
      yield put(registerUserSuccess(item));
      history.push(adminRoot);
    } else {
      yield put(registerUserError(registerUser.message));
    }
  } catch (error) {
    yield put(registerUserError(error));
  }
}

export function* watchRegisterUser() {
  yield takeEvery(REGISTER_USER, registerWithEmailPassword);
}

register form

            <Formik initialValues={initialValues} onSubmit={onUserRegister}>
              {({ errors, touched }) => (
                <Form className="av-tooltip tooltip-label-bottom">
                  <FormGroup className="form-group has-float-label">
                    <Label>
                      <IntlMessages id="user.fullname" />
                    </Label>
                    <Field
                      className="form-control"
                      name="username"
                      placeholder="John Doe"
                    />
                  </FormGroup>
                  <FormGroup className="form-group has-float-label">
                    <Label>
                      <IntlMessages id="user.email" />
                    </Label>
                    <Field
                      name="email"
                      className="form-control"
                      validate={validateEmail}
                      placeholder="johndoe@example.com"
                    />
                    {errors.email && touched.email && (
                      <div className="invalid-feedback d-block">
                        {errors.email}
                      </div>
                    )}
                  </FormGroup>
                  <FormGroup className="form-group has-float-label">
                    <Label>
                      <IntlMessages id="user.password" />
                    </Label>
                    <Field
                      className="form-control"
                      placeholder="Enter Password"
                      name="password"
                      type="password"
                      validate={validatePassword}
                    />
                    {errors.password && touched.password && (
                      <div className="invalid-feedback d-block">
                        {errors.password}
                      </div>
                    )}
                  </FormGroup>
                  <FormGroup className="form-group has-float-label">
                    <Label>
                      <IntlMessages id="user.repeat-password" />
                    </Label>
                    <Field
                      className="form-control"
                      name="repeatPassword"
                      type="password"
                      placeholder="Repeat Password"
                    />
                  </FormGroup>
                  <div className="d-flex justify-content-between align-items-center">
                    <Button
                      type="submit"
                      color="primary"
                      className={`btn-shadow btn-multiple-state btn-login ${
                        loading ? 'show-spinner' : ''
                      }`}
                    >
                      <span className="spinner d-inline-block">
                        <span className="bounce1" />
                        <span className="bounce2" />
                        <span className="bounce3" />
                      </span>
                      <span className="label">
                        <IntlMessages id="user.register-button" />
                      </span>
                    </Button>
                  </div>
                </Form>
              )}
            </Formik>

i'm using formik to render the form, but i dont think it really matters what form im using. i mainly can't figure out the saga part that handles the redirection. any help will be appreciated!!

Answer 1

So, I have managed to solved the problem after multiple attempts.

Turns out that const item = { uid: registerUser.user.uid, ...currentUser }; is actually pointing to the wrong db. Removed it and set to the correct db and everything worked like a charm.

so final codes in saga.js is:

function* registerWithEmailPassword({ payload }) {
  const { email, password, username } = payload.user;
  const { history } = payload;
  try {
    const registerUser = yield call(
      registerWithEmailPasswordAsync,
      email,
      password,
      username
    );
    if (!registerUser.message) {
      setCurrentUser(registerUser.data); <-- correct db
      yield put(registerUserSuccess(registerUser.data));
      history.push(adminRoot);
    } else {
      yield put(registerUserError(registerUser.message));
    }
  } catch (error) {
    yield put(registerUserError(error));
  }
}