Обновления состояния Redux, но состояние компонента не меняется с первого раза - PullRequest
Новая
       38

Обновления состояния Redux, но состояние компонента не меняется с первого раза

0 голосов
/ 12 апреля 2020

Я разрабатываю систему входа в систему / регистрации с использованием Redux, Hooks и Ax ios действие должно получить бэкэнд и вернуть сеанс для обновления в моем редукторе, после чего я пытаюсь выполнить console.log (session) из мой компонент в первый раз {} пуст 'Начальное состояние сеанса' утешается при втором обновлении, я проверил свое состояние с избыточностью и все работает хорошо, и состояние обновляется с первого раза, так что это не проблема с избыточностью. Проблема в моем компоненте, так как мне нужно, чтобы он дождался завершения Redux, а затем console.log (), я пытался установить setTime (), но он ждет в течение заданного времени, и после этого он снова поддерживает исходное состояние {}.

Мой код:

Компонент: Проблема в функции Redirect () 

import { LoginAction } from "../../Redux/Actions";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";

const Login = (props) => {
  let history = useHistory();
  const alert = useAlert();

  const { handleSubmit, register, errors } = useForm();

  const onSubmit = (data) => {
    const userData = {
      username: data.username.toUpperCase(),
      password: data.password,
    };
    props.login(userData);
    setTimeout(1000, Redirect());
  };
  const Redirect = () => {
    if (props.session.user) {
      console.log(props.session);
      sessionStorage.setItem("storedSession", props.session.user.username);
      history.push("/dashboard");
    } else {
      alert.show(<div style={{ size: "10px" }}>{props.session.error}</div>);
    }
  };
  return (
    <div className="login">
      <div className="login-form">
        <h3 className="title">Sign In</h3>
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="text"
            placeholder="Enter your username"
            name="username"
            id="username"
            ref={register({ required: true })}
          />
          {errors.username && errors.username.type === "required" && (
            <p className="error-before-submit">This is required</p>
          )}
          <input
            id="password"
            placeholder="Enter your password"
            name="password"
            type="password"
            ref={register({ required: true })}
          />
          {errors.password && errors.password.type === "required" && (
            <p className="error-before-submit">This is required</p>
          )}
          <input
            className="btn"
            type="submit"
            ref={register({ required: true })}
          />
          <a href="/register" className="register-link">
            Create an account
          </a>
        </form>
      </div>
    </div>
  );
};
const mapStateToProps = (state) => ({
  session: state.Session,
});
const mapDispatchToProps = (dispatch) => ({
  login: (user) => dispatch(LoginAction(user)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);

Редуктор: 


const initialState = {
  Session: {},
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case Register:
      return {
        ...state,
        Session: action.payload,
      };
    case Login:
      return {
        ...state,
        Session: action.payload,
      };
    default:
      return state;
  }
};
export default rootReducer;

Действие: 

export function LoginAction(user) {
  return (dispatch) => {
    Axios.post(
      "/api/login",
      {
        username: user.username,
        password: user.password,
      },
      {
        headers: { "Access-Control-Allow-Origin": "*" },
        withCredentials: true,
        crossdomain: true,
      }
    ).then((res) => {
      dispatch({
        type: Login,
        payload: res.data,
      });
    });
  };
}

Как заставить мой компонент принять обновленное состояние, а не исходное состояние ОТ ПЕРВОГО ЩЕЛЧКА ??

1 Ответ

2 голосов
/ 12 апреля 2020

Вы можете использовать useEffect крюк вместо использования timeout

const {session} = props;

useEffect(()=>{ 

  Redirect()

},[session])
...