javascript - Axios post 方法 React.状态 Redux 不更新

Question

Redux 中的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 没有完成请求。第二次点击后一切正常。

这里我对 Prop 有疑问:

{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 方法发布 完成后使用新的 Props 渲染 component 吗？

Answer 1

我想你已经把这段代码写进了reducer，api调用应该在Action Dispacher里面完成。成功调用 api 后，您必须将数据分派(dispatch)给 reducer。在 reducer 中，你应该只分配数据，在 reducer 中没有 API 调用。

例如

Action 调度器

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))
        });

    }
}

reducer

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