Axios post方法React。 State Redux沒有更新

Question

我在Redux axios State問題這是我的axios請求

case 'REGISTER_USER':{

  var userData = {username: action.payload.username, password : action.payload.password};

  axios({
    method: 'post',
    url: 'php/register.php',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: userData
  }).then(function(response) {
    state.error = response.data.errors;
    state.success = response.data.success;
});
    return {state};
    break;
  }//end REGISTER_USER

默認state.error ， state.success為空array 。 在第一次單擊state.error之后仍然是空數組，因為axois沒有完成請求。 第二次點擊后一切都很好。

這里我有道具問題：

{this.props.error.length>0? <div className="alert alert-danger">{this.props.error[0]}</div>: ''}

並存儲：

@connect((store)=>{
  return{
    error: store.app.error,
    success: store.app.success,
  }
})

在axios method post完成后，你知道我如何使用新的Props渲染component 。

Answer 1

我認為你已經將這段代碼寫入reducer，api調用應該在Action Dispacher中完成。 api成功調用后你必須將數據發送到reducer。 在reducer中，您應該只在Reducer中分配Data，而不是API調用。

例如

行動調度員

export function APIDispatch(data)
{
    return{
        type:'API_DATA_RECD',                
        data:data
    }
}

export function callAPI(){
    return function(dispatch){
         axios({
            method: 'post',
            url: 'php/register.php',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: userData
          }).then(function(response) {
            state.error = response.data.errors;
            state.success = response.data.success;
            dispatch(APIDispatch(state))
        });

    }
}

減速器

case 'API_DATA_RECD':
    {   
        // you will get data from action.data
    }

Answer 2

Axios正在異步地發出ajax請求，在REGISTER_USER的情況下，它正在使用state屬性立即返回對象的代碼片段，同時請求仍處於未決狀態，這意味着該對象沒有任何有意義的值。 只有在您完成的請求完成后，您才應返回值。

嘗試這個：

case 'REGISTER_USER':{

  var userData = {username: action.payload.username, password : action.payload.password};

  axios({
    method: 'post',
    url: 'php/register.php',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: userData
  }).then(function(response) {
    state.error = response.data.errors;
    state.success = response.data.success;

    return {state}
});
    break;
  }//end REGISTER_USER