Проблема реагирования-редукции с действием onSubmit и asyn c при вызове API

Question

Я просто делаю свои первые шаги с реакцией и избыточностью. Сначала я начал проект без избыточности, и теперь я решил реализовать его с использованием избыточности. Логин работал до того, как я адаптировал его к редуксу. Применяется ThunkMiddleware

Теперь проблема: Когда я нажимаю кнопку входа в систему, регистратор или DevTools показывает только LOGIN_FAILURE. Страница перезагружается и снова отображает логин.

Если я изменю это onSubmit={() => props.login(username, password)} на это onSubmit={props.login(username, password)}

LOGIN_REQEST, действия будут спамированы и, наконец, (если пароль хранится в браузере) LOGIN_SUCCESS , Я получаю фактический контент с правильными данными с сервера.

Что мне нужно изменить, чтобы логин работал нормально?

Спасибо за вашу помощь

LoginComponent:

function Login(props) {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    return (
        <div>
    <form onSubmit={() => props.login(username, password)}>
            <TextField
                onChange={e => setUsername(e.target.value)}
            />
            <br/>
            <TextField
                onChange={e => setPassword(e.target.value)}
            />
            <br/>
            <Button type="submit">
                Login
            </Button>
    </form>
</div>);
}

const mapDispatchToProps = dispatch => {
    return {
        login: (username, password) => dispatch(login(username, password))
    }
};

export default connect(
    null,
    mapDispatchToProps
)(Login)

LoginAction

import {
    LOGIN_FAILURE,
    LOGIN_REQUEST,
    LOGIN_SUCCESS
} from "./LoginTypes";

export const login = (username = '', password = '') => {
    return (dispatch) => {
        dispatch(loginRequest());
        axios.post(`server`, {
            //data
        }).then(
            (res) => {
                dispatch(loginSuccess(res));
            },
            (err) => {
                dispatch(loginFailure(err.message));
            }
        );
    }
};

export const loginRequest = () =>{
    return {
        type: LOGIN_REQUEST
    }
};

export const loginSuccess = tabs =>{
    return {
        type: LOGIN_SUCCESS,
        payload: tabs
    }
};

export const loginFailure = error =>{
    return {
        type: LOGIN_FAILURE,
        payload: error
    }
};

LoginReducer:

const LoginReducer = (state = initialState, action) => {
  switch (action.type){
      case LOGIN_REQUEST:
          return {
              ...state,
              loading: true
          };
      case LOGIN_SUCCESS:
          let tabBars = populateArray1(action.payload);
          let navIcons = populateArray2();
          return{
              ...state,
              loading: false,
              tabBars: tabBars,
              navIcons: navIcons,
              isLoggedIn: true
          };
      case LOGIN_FAILURE:
          return{
              ...state,
              loading: false,
              error: action.payload
          };
      default: return state;
  }
};

компонент, который контролирует логин и контент:

function Main(props) {
    if(props.auth){
        return(
            <NotLogin />
        )
    }
    else{
        return <Login />
    }
}

Answer 1

Ваша страница входа в систему получает обновления / перенаправления, из-за чего она не обрабатывает запрос API и его ответ должным образом. Попробуйте это, обновив свой компонент входа в систему.

function Login(props) {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const handleLogin = (event) => {
         event.preventDefault()
         props.login(username, password);
   }
    return (
        <div>
    <form onSubmit={handleLogin}>
            <TextField
                onChange={e => setUsername(e.target.value)}
            />
            <br/>
            <TextField
                onChange={e => setPassword(e.target.value)}
            />
            <br/>
            <Button type="submit">
                Login
            </Button>
    </form>
</div>);
}

После обновления убедитесь, что вы получаете правильное значение в props.auth через приставку в компоненте Main. Основной компонент должен иметь в вашем коде избыточное соединение с избыточным состоянием аутентификации.