Question

我正在尝试对saga函数export function* userLogin进行api调用。但是，所有返回的信息都是在网络服务器上的错误请求。

在此功能中我看不到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

旧的代码。

// 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
//                 })
//             }
//         })
// }

Answer 1

在将Saga代码与您的Thunk进行比较时，我注意到了两件事：

传奇故事将action.data而不是action.userData传递到您的api调用中。该操作返回了userData。
api调用将{userData}而不是userData传递给请求。这意味着您是沿着{ userData: { username, password } }发送，而不是{ username, password }

redux saga没有获取用户数据

1 个答案: