Question

我对react-redux完全陌生。我正在使用redux-thunk。在这里，我有一个登录操作。在该操作上，我正在调用一个API，该API将给我一些必须存储在状态中的令牌。然后，此操作成功后，我必须立即发出另一个API请求，该请求将在标头中包含此令牌并获取更多数据。基于此，我想重定向用户。

所以

import { generateToken } from '../APIs/login';
import HttpStatus from 'http-status-codes';
import { LOGIN_FAILED, LOGIN_SUCCESS } from '../constants/AppConstants';
import {  fetchUserJd } from './GetUserJd';
import history from '../history';

export function fetchToken(bodyjson) {
    return (dispatch) => {
        getLoginDetails(dispatch, bodyjson);
    }
}

export function getLoginDetails(dispatch, bodyjson) {
    generateToken(bodyjson)
        .then((response) => {
            if (response.status === 200)
                dispatch(sendToken(response.payload))
            else
                dispatch(redirectUser(response.status));
        })
}

export function sendToken(data) {
    return {
        type: LOGIN_SUCCESS,
        data: data,
    }
}

export function redirectUser(data) {
    return {
        type: LOGIN_FAILED,
        data: data,
    }
}

这是我的登录操作。

import { FETCHING_JOBDESCRIPTION_SUCCESS, FETCHING_DATA_FAILED,FETCHING_JOBS } from '../constants/AppConstants';
import { getUserJobs } from '../APIs/GetUserJd';
import history from '../history';

export function fetchUserJd(token) {
    console.log(token);
    return (dispatch) => {
        dispatch(fetchingJobDescription());
    }
};

export function getUserJd(dispatch, token) {
    getUserJobs(token)
        .then((response) => {
            if (response.status === 200)
                dispatch(sendUserJd(response.payload))
            else
                dispatch(fetchFailure(response.status));
        })
}

export function fetchFailure(data) {
    return {
        type: FETCHING_DATA_FAILED,
        data: data,
    }
}

export function sendUserJd(data) {
    return {
        type: FETCHING_JOBDESCRIPTION_SUCCESS,
        data: data,
    }
}

export function fetchingJobDescription() {
    return {
        type: FETCHING_JOBS
    }
}

这是我的第二个动作。

现在，

handleClick(event) {
        event.preventDefault();
        var bodyJson = {
            "username": this.state.UserName,
            "password": this.state.password
        }
        this.props.fetchToken(bodyJson);
    }

这是从容器中单击的登录按钮将被调用。

现在，如何在成功登录请求后调用第二个动作？我也想分派这两个动作。

我尝试->

export function getLoginDetails(dispatch, bodyjson) {
    generateToken(bodyjson)
        .then((response) => {
            if (response.status === 200)
                dispatch(sendToken(response.payload))
                dispatch(fetchUserJd(dispatch))
            else
                dispatch(redirectUser(response.status));
        })
}

但是没有运气。有人可以帮我吗？

Answer 1

当if / else子句的行数超过一行时，必须使用花括号。

export function getLoginDetails(dispatch, bodyjson) {
  generateToken(bodyjson)
    .then((response) => {
      if (response.status === 200) {
        dispatch(sendToken(response.payload));
        dispatch(fetchUserJd(dispatch));
      } else {
        dispatch(redirectUser(response.status));
      }
    })
}

在react-redux，redux-thunk中一个接一个地调用多个动作

1 个答案: