I apologize in advance for the formatting (still a newb on this), and maybe for the stupid question (still a newb on this whole React ecosystem).

I've recently picked up redux-form, and since then I've been trying to use it in the following way:

export const searchPermissions = () => {
  return dispatch => {
    Axios.get(`${URL}/findPermissions`)
      .then(resp => {
        console.log(resp.data);
        dispatch({ type: PERMISSIONS_SEARCHED, payload: resp.data });
      })
      .catch(error => {
        console.log(error);
        throw new SubmissionError({
          _error: "Submission error!"
        });
      });
  };
};

And I keep getting the Uncaught error.

Searching through redux-form's github, I saw several similar problems that ended up being solved by adding the return statement (which I think I did correctly) and now I'm kinda lost.

Thanks in advance for any help.

EDIT: I'm trying to fetch the permissions to display them in 3 bo boxes as soon as the user enters the page. In the ponent used to fetch the data I have the following code:

  ponentWillMount() {
    this.props.searchPermissions();
  }
  render() {
    return (
      <div>
        <LayoutGroupForm
          onSubmit={this.props.addLayoutGroup}
          loadPermissions={this.props.loadPermissions}
          visualizationPermissions={this.props.visualizationPermissions}
          detailPermissions={this.props.detailPermissions}
          resetForm={this.props.resetForm}
        />
      </div>
    );
  }
}
const mapStateToProps = state => ({
  loadPermissions: state.layoutGroup.loadPermissions,
  visualizationPermissions: state.layoutGroup.visualizationPermissions,
  detailPermissions: state.layoutGroup.detailPermissions
});
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      searchPermissions,
      addLayoutGroup,
      resetForm
    },
    dispatch
  );

And on my reducer I have the following:

    case PERMISSIONS_SEARCHED:
      return {
        ...state,
        loadPermissions: action.payload.loadPermissions,
        visualizationPermissions: action.payload.visualizationPermissions,
        detailPermissions: action.payload.detailPermissions
      };

I apologize in advance for the formatting (still a newb on this), and maybe for the stupid question (still a newb on this whole React ecosystem).

I've recently picked up redux-form, and since then I've been trying to use it in the following way:

export const searchPermissions = () => {
  return dispatch => {
    Axios.get(`${URL}/findPermissions`)
      .then(resp => {
        console.log(resp.data);
        dispatch({ type: PERMISSIONS_SEARCHED, payload: resp.data });
      })
      .catch(error => {
        console.log(error);
        throw new SubmissionError({
          _error: "Submission error!"
        });
      });
  };
};

And I keep getting the Uncaught error.

Searching through redux-form's github, I saw several similar problems that ended up being solved by adding the return statement (which I think I did correctly) and now I'm kinda lost.

Thanks in advance for any help.

EDIT: I'm trying to fetch the permissions to display them in 3 bo boxes as soon as the user enters the page. In the ponent used to fetch the data I have the following code:

  ponentWillMount() {
    this.props.searchPermissions();
  }
  render() {
    return (
      <div>
        <LayoutGroupForm
          onSubmit={this.props.addLayoutGroup}
          loadPermissions={this.props.loadPermissions}
          visualizationPermissions={this.props.visualizationPermissions}
          detailPermissions={this.props.detailPermissions}
          resetForm={this.props.resetForm}
        />
      </div>
    );
  }
}
const mapStateToProps = state => ({
  loadPermissions: state.layoutGroup.loadPermissions,
  visualizationPermissions: state.layoutGroup.visualizationPermissions,
  detailPermissions: state.layoutGroup.detailPermissions
});
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      searchPermissions,
      addLayoutGroup,
      resetForm
    },
    dispatch
  );

And on my reducer I have the following:

    case PERMISSIONS_SEARCHED:
      return {
        ...state,
        loadPermissions: action.payload.loadPermissions,
        visualizationPermissions: action.payload.visualizationPermissions,
        detailPermissions: action.payload.detailPermissions
      };

• javascript
• reactjs
• redux
• redux-form

• This is what you are passing to onSubmit? Where is the rest of the ponent? Are you getting the error or the data printed to the log? More info needed to diagnose your problem. – Erik R. Commented Dec 19, 2017 at 16:12
• Added more info, thanks for answering and sorry if this ends up being stupid – Victor Commented Dec 20, 2017 at 12:17

2 Answers 2

For those of you who still encounter this issue (like me), the solution is to add return to your submit handler. Read more here https://github./erikras/redux-form/issues/2269

Redux Form is expecting the error to e as the error in a rejected promise. Try this:

export const searchPermissions = () => {
  return dispatch => {
    return Axios.get(`${URL}/findPermissions`)
//  ^^^^^^-------------------------------------- Actually return the promise!
      .then(resp => {
        console.log(resp.data);
        dispatch({ type: PERMISSIONS_SEARCHED, payload: resp.data });
      })
      .catch(error => {
        console.log(error);
        return Promise.reject(new SubmissionError({
//      ^^^^^^^^^^^^^^^^^^^^^^------------------------ Return rejected promise
          _error: "Submission error!"
        }));
      });
  };
};