javascript - 在 redux saga 中创建帐户后如何重定向回登录？

Question

我是 redux-saga 的新手，我不太确定为什么在创建帐户后我不能被重定向回登录页面？我已经包含了启用重定向所需的代码，但我在注册时总是得到一个空白页面。

动作.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 },
});

减速器.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,
      };
  }
};

传奇.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="[e-mail]"
                    />
                    {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>

我正在使用 formik 来呈现表单，但我认为我使用什么表单并不重要。我主要无法弄清楚处理重定向的传奇部分。任何帮助将不胜感激！！

标签： javascriptreactjsredirectreduxredux-saga

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