javascript - redux thunk 中的多个 api 调用操作

Question

我正在使用 redux-thunk 。在这里，我有一个登录操作。在该操作中，我调用了一个 API，它会给我一些 token ，我必须将其存储在状态中。然后，在此操作成功后，我必须立即发出另一个 API 请求，该请求将在 header 中包含此 token 并获取更多数据。基于此，我想重定向用户。

登录操作

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,
        }
    }

第二个 Action

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 获取组件本身的 token 。然后调用 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));
            })
    }

如果您有任何疑问或觉得难以理解，请告诉我