Question

我正在使用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);
    }

如何在第一个请求成功后立即调用第二个操作。？

尝试的方式->

componentWillReceiveProps(newProps) {
        console.log(newProps.token);
        if(newProps.token) {
            this.props.fetchUserJd(newProps.token);
        }
    }


export function sendUserJd(data) {
    if (data.data.length > 0) {
        history.push('/userJobs');
    } else {
        history.push('/createJob');
    }
    return {
        type: FETCHING_JOBDESCRIPTION_SUCCESS,
        data: data,
    }
}

Answer 1

您可以不将其设置为redux状态。您需要返回成功操作调用，以使用promise .then在组件本身中获取令牌，然后调用this.props.sendToken（token）;。它将实际设置数据状态并遵循您现有的流程。

handleClick(event) {
        event.preventDefault();
        var bodyJson = {
            "username": this.state.UserName,
            "password": this.state.password
        }
        this.props.getLoginDetails(bodyJson).then((token) => {
           this.props.sendToken(token);
        });
    }

行动中

const GET_LOGIN_DETAILS_SUCCESS = 'GET_LOGIN_DETAILS_SUCCESS';
export function getLoginDetailsSuccess(data) {
    return {
        type: GET_LOGIN_DETAILS_SUCCESS,
        data: data,
    }
}

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

让我知道您是否有任何疑问或感到难以理解

redux thunk中的多个api调用操作

1 个答案: