ReactJS: Trying to make a POST

Question

I'm trying to do a post but always I receive an

400 error (Bad Request) caught at middleware with reason: "Request failed with status code 400".
Uncaught (in promise) Error: Request failed with status code 400

I have tried to see in Network - Preview but I don't have any message there.

This is what I'm trying to do:

  const saveEntity = (event, errors, values) => {
   values.lastModifiedBy = null;
    values.lastModifiedDate = null;
    console.log('values: ', values);
    if (errors.length === 0) {
         Realms.forEach(elementRealm => {
          if(`${elementRealm.id}` === values.realmId.id){
           values.realmId = elementRealm
         }
      })
      const entity = {
        ...values,
}
  if (isNew) {
        props.createEntity(entity);
      } else {
        props.updateEntity(entity);
      }
    }

In my reducer:

export const createEntity: ICrudPutAction<Realm> = entity => async dispatch => {
  const result = await dispatch({
    type: ACTION_TYPES.CREATE_REALM,
    payload: axios.post(apiUrl, cleanEntity(entity)),
  });
  dispatch(getEntities());
  return result;
};

and the form that I use is:

    <AvForm model={isNew ? {} : Realm} onSubmit={saveEntity}>
                  <AvField
                    id="sce-realmName"
                    data-cy="realName"
                    type="text"
                    name="realmName"
                    validate={{
                      required: { value: true, errorMessage: 'This field is required.' },
                    }}
                  />
<AvGroup>
                <Label id="descriptionLabel" for="sce-realmDescription">
                  Description
                </Label>
                <AvField id="sce-realmDescription" data-cy="description" type="text" name="description" />
              </AvGroup>
 <AvInput
                      id="sce-realm-realmId"
                      data-cy="realmId"
                      type="select"
                      className="form-control"
                      name="realmId.id"
                      required
                    >
                      <option value="" key="0" />
                      {Realms
                        ? Realms.map(otherEntity => (
                            <option value={otherEntity.id} key={otherEntity.id}>
                              {otherEntity.name}
                            </option>
                          ))
                        : null}
                    </AvInput>

I really don't understand where could be the problem, how can I do?

Answer 1

AFAIK, dispatching action is synchronous so you can't await it. So the issue is coming from your dispatching part. It should be fixed if you do something like this

export const createEntity: ICrudPutAction<Realm> = entity => async dispatch => {
  const result = await axios.post(apiUrl, cleanEntity(entity));
  dispatch({
    type: ACTION_TYPES.CREATE_REALM,
    payload: result.data,
  });
  dispatch(getEntities());
  return result;
};

You need await for your API call to finish then dispatch an action which is sync call. and 4XX errors occur when it's a client side error, so you need to check your post data format, headers, etc because of which the server might reject your request with error.