Axios post method React. State Redux not update

Question

I have problem with State in Redux This is my axios request

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

Default state.error , state.success is empty array . After first click state.error is still empty array because axois didn't finish request. After 2nd click everything is fine.

And here i have problem with props:

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

And store:

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

Do u know how i can render component with new Props after axios method post finished.

Answer 1

I think you have written this code into reducer, the api call should be done inside Action Dispacher . After api successfully called you have to dispatch data to reducer. In reducer you should only assign the Data, no API Calls inside reducer.

for eg

Action Dispatcher

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
    }

Answer 2

Axios is making an ajax request asynchronously, in the case REGISTER_USER , the piece of code it's returning the object with the state property right away meanwhile the request is still pending, that means the object has no meaninful values. You should only return values whenever the request(s) you're making are completed.

Try this:

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