Блог

Главная - Вопросы по программированию - как перенаправить обратно на вход в систему после создания учетной записи в redux saga?

как перенаправить обратно на вход в систему после создания учетной записи в redux saga?

#javascript #reactjs #redirect #redux #redux-saga

Вопрос:

я новичок в redux-saga, и я не очень уверен, почему меня нельзя перенаправить обратно на страницу входа после создания учетной записи? я включил необходимые коды для включения перенаправления, но при регистрации мне всегда выдается пустая страница.

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

регистрационная форма

             <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 amp;amp; touched.email amp;amp; (
                      <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 amp;amp; touched.password amp;amp; (
                      <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>

я использую formik для визуализации формы, но я не думаю, что действительно имеет значение, какую форму я использую. я в основном не могу понять часть саги, которая обрабатывает перенаправление. любая помощь будет оценена по достоинству!!

Комментарии:

1. Кажется, это правильная идея — откуда adminRoot она взялась? Правильно ли ваш маршрутизатор распознает и обрабатывает любой маршрут, к которому он относится? Если вы получаете пустую страницу, я предполагаю, что это не проблема с сагой, так как единственный раз, когда история меняется прямо сейчас, это после успешного входа в сагу.

2. Корень администратора используется как часть значения по умолчанию export const adminRoot = '/app';

3. Попробуйте что-то вроде history.push("/hello-world"); и проверьте, стал ли URL-адрес в браузере /hello-world или нет.

4. URL-адрес остается таким http://localhost:3000/user/register

Ответ №1:

Итак, мне удалось решить проблему после нескольких попыток.

Оказывается, const item = { uid: registerUser.user.uid, ...currentUser }; это на самом деле указывает на неправильную базу данных. Удалил его и установил на правильную базу данных, и все работало как по волшебству.

так что окончательные коды в saga.js является:

 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));
  }
}
Метки: