Редаксовая сага не получает пользовательские данные - PullRequest
Новая
       16

Редаксовая сага не получает пользовательские данные

0 голосов
/ 27 июня 2019

Я пытаюсь сделать вызов API для функции саги export function* userLogin.Однако все, что я получаю, это неверный запрос на сетевом сервере.

Я не могу видеть console.log в этой функции. 

export function* userLogin(action){
    try{
        const user = yield call(api.user.loginUser, action.data);
        console.log(user);
        const token = user.token
        console.log(token);
        // pass the token in session

        sessionStorage.setItem("jwtToken", token);
        setAuthToken(token);
        const decoded = jwt_decode(token);
        // pass the decoded token
        // dispatch(setCurrentUser(decoded))
        // yield put(userLogInSuccess(user));
        yield put( userLogInSuccess(decoded))
    }
    catch(error){
        yield put(userLogInFailure(error.response.data));
    }
}
export function* watchUserLogIn() {
    yield takeLatest(LOGIN_USER, userLogin);
}


export default function* () {
    yield fork(watchUserLogIn);
}

вызов API 

import Axios from './Axios';

export default {
    user:{
        loginUser: userData => 
            Axios.post('/users/login', {userData}).then(res => res.data.token)
    }
};

действия 

export const loginUser = (userData) => {
    return {
      type: LOGIN_USER,
      userData
    };
  }

export const userLogInSuccess = token => ({
    type: USER_LOG_IN_SUCCESS,
    token
})

export const userLogInFailure = error => ({
    type: USER_LOG_IN_FAILURE,
    error
})

Login.js 

 .....
 handleSubmit = (e) => {
     e.preventDefault();
     const {formData} = this.state;
     const {username, password} = formData;
     const creds = {
        username,
        password
     }
 this.props.loginUser(creds);


 // console.log(creds);
}
 ...
const mapStateToProps = (state) => ({
    auth: state.auth
})
const mapDispatchToProps = (dispatch) => ({
    loginUser: (userData) => dispatch(loginUser(userData)),

})
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Axios.js 

import Axios from 'axios';
import 'dotenv/config';

let AxiosInstance = Axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,  // localhost:3000
    withCredentials: true,
    headers : {
      'Content-Type' : 'application/json',
      'Accept' : 'application/json',
    }

  })



 AxiosInstance.interceptors.response.use(function(response) {
    // const token = localStorage.getItem('auth');
    // response.headers.Authorization =  token ? `Bearer ${token}` : '';
    // console.log(token);
    return response;
 })

export default AxiosInstance

oldкод Thunk.

// export const loginUser = userData => dispatch => {
//     Axios.post('/users/login', userData)
//         .then( res => {
//             // retrieve token from the response 
//             const token = res.data.token;
//             // console.log(token);
//             // pass the token in session
//             sessionStorage.setItem("jwtToken", token);
//             // set the auth token
//             setAuthToken(token);

//             // decode the auth token
//             const decoded = jwt_decode(token);
//             // pass the decoded token
//             dispatch(setCurrentUser(decoded))

//         })
//         .catch(err => {
//             if(err.response.data){
//                 console.log(err.response)
//                 dispatch({
//                     type: GET_ERRORS,
//                     payload: err.response.data
//                 })
//             }
//         })
// }

1 Ответ

1 голос
/ 27 июня 2019

2 вещи, которые я заметил, сравнивая код Saga с вашим Thunk:

  1. Сага передает action.data в ваш вызов API вместо action.userData. userData возвращается из действия.
  2. вызов API передает {userData} запросу вместо userData. Это означает, что вы отправляете { userData: { username, password } } вместо { username, password }
...