嵌套的调度功能无法获取更新道具

时间:2020-01-09 09:53:54

标签: react-redux

app.js

const mapStateToProps = (state) => {
    return {home:state}
}

const mapDispatchToProps = (dispatch) => {
    return {
        guestLogin: (data)=>{dispatch(guestLogin(data)).then(()=>{
            dispatch(initiateTrans(stateProps.home))
        })},
    };
}

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    return Object.assign({}, ownProps, stateProps, dispatchProps,{
        initiateTrans: () => dispatchProps.initiateTrans(stateProps.home),
    })
}


Action.js

export const guestLogin= (state)=>{
    var data={
        'email':state.email,
        'name':state.name,
        'phone_number':state.ph_number,
        'phone_code':state.country_code
    }
    return function(dispatch) {
        return dataservice.guestSignup(data).then(res => {
            dispatch(afterLoggedGuest(res))
        }).catch(error => {
            throw(error);
        });
    }
}


function afterLoggedGuest(result) {    
    return {type: guestLoginChange, result};
}


export const initiateTrans= (updatedState)=>{    
    return function(dispatch) {
        return dataservice.initiateTransaction(updatedState).then(res => {
            console.log("initiateTransaction",res)
        }).catch(error => {
            throw(error);
        });
   }
}

Reducer.js

if(action.type === guestLoginChange){
        return {
            ...state,guestData: {
                ...state.guestData,
                Authorization: action.result.authentication ,
                auth_token: action.result.auth_token ,
                platform: action.result.platform
            } ,                  
        }        
  }

我有两个api请求。在第一个api请求成功之后,我想更新状态值,然后将该更新后的状态传递给另一个api请求。

我试图得到更新的道具 如何使用更新道具调度initialTrans 我需要在回叫的api请求成功时更新值,我需要再调用一个具有更新后的状态值的请求

当前我无法获得更新道具值

1 个答案:

答案 0 :(得分:0)

我认为这是thunk(Tomcat doc)的好用例,thunk是一种中间件,可以让您在一个动作中执行多个调度。

在配置初始存储时,您将需要应用中间件(请参见上面链接上的文档)。但是,在执行操作时,您可以使用分派返回语句包装代码,从而可以访问多个调用。例如:

export const guestLogin= (state)=>{
    return dispatch => {    
        var data={...} // some data in here
        return dataservice.guestSignup(data).then(res => {
            dispatch(afterLoggedGuest(res))
        }).catch(error => {
            throw(error);
            // could dispatch here as well...
        });
    }
}