UseEffect не сработало, когда изменение редукционных реквизитов вызвано асинхронным вызовом API c с redux-thunk - PullRequest
Новая
       7

UseEffect не сработало, когда изменение редукционных реквизитов вызвано асинхронным вызовом API c с redux-thunk

0 голосов
/ 18 февраля 2020

У меня есть функциональная страница входа в систему, связанная с redux, я запускаю asyn c событие onSubmit, которое вызовет действие emailLogin, я использую useEffect, чтобы обнаружить изменение реквизита isLoading в посмотреть, завершен ли вход в систему или нет. Если вход в систему успешен, в хранилище редуктов должен быть объект пользователя, в случае сбоя пользователь должен остаться нулевым.

Вопрос в том, я знаю, что вход в систему выполнен успешно, что должно вызвать изменение isLoading, параметр, который определяет, будет ли useEffect, однако, useEffect не запущен. Кроме того, console.log('done'); после строки await emailLogin(authData); никогда не запускается. Что-то не так. 

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Link, useHistory } from 'react-router-dom';
import { emailLogin } from '../actions/index';

function Login({ user, isLoading, emailLogin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const history = useHistory();

  useEffect(() => {
    console.log('useEffect fired', user, isLoading); //<-----This does not fire after login success
    if (user) {
      history.push('/protected_home');
    } 
  }, [isLoading]);

  const submitEmailLoginForm = async (e) => {
    e.preventDefault();
    const authData = { email, password };
    await emailLogin(authData);
    console.log('done'); // <------- This is never fired
  };

  return (
    <div>
      <h2>Login</h2>
      <Link to="/">back</Link>
      <form onSubmit={submitEmailLoginForm}>
        <label>
          email:
          <input
            type="text"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <label>
          password:
          <input
            type="text"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

const mapStateToProps = (state) => ({
  user: state.user,
  isLoading: state.isLoading
});

const mapDispatch = {
  emailLogin: emailLogin
};

export default connect(mapStateToProps, mapDispatch)(Login);

Мой файл действий: 

import axios from 'axios';

export const authActions = {
  EMAIL_LOGIN_START: '@@EMAIL_LOGIN_START',
  EMAIL_LOGIN_SUCCESS: '@@EMAIL_LOGIN_SUCCESS'
};

export const emailLogin = ({ email, password }) => async (dispatch) => {
  dispatch({ type: authActions.EMAIL_LOGIN_START });
  try {
    const response = await axios.post('http://localhost:5001/api/auth', {
      email: email,
      password: password
    });
    dispatch({
      type: authActions.EMAIL_LOGIN_SUCCESS,
      payload: {
        user: { ...response.data }
      }
    });
  } catch (error) {
    console.log('Should dispatch api error', error.response);
  }
};

Мой редуктор: 

import { authActions } from '../actions/index';

const initialState = {
  user: null,
  isLoading: false
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case authActions.EMAIL_LOGIN_START:
      return { ...state, isLoading: true };
    case authActions.EMAIL_LOGIN_SUCCESS:
      console.log('Reducer check => Login is success'); //<-----this line is printed
      return { ...state, user: action.payload.user, isLoading: false };
    default:
      return state;
  }
};

export default userReducer;

В редукторе я вижу, что действие на самом деле действительно срабатывает при проверке console.log(). Также в инструменте redux dev я действительно вижу, что вход в систему успешен, и пропел isLoading: enter image description here

1 Ответ

0 голосов
/ 19 февраля 2020

Это решит мою проблему 

const mapStateToProps = (state) => ({
  user: state.userReducer.user,
  isLoading: state.userReducer.isLoading
});
...