Issue when used with redux-form

[nikksan]

I have a form which I want to validate on the client side, aswell as on the server side. The client side validation is handled by the redux-form package and the server side is handled using regux-logic. In order to trigger the the redux form error I must throw SubmissionError, however if I try to do that in the process method the error is thrown on the global scope and is not handled by the redux-form.

Here is how my logic looks like:

const formSubmitLogic = createLogic({
  type: SUBMIT_FORM,
  latest: true,
  async process({ action }, dispatch, done) {
    try {
      await Api.submitForm(action.form);
    } catch (err) {
      throw new SubmissionError(err);
    }
    
    done();
  },
});

[nikksan]

I eventually fixed it. The issue turned out to be more related to the redux-form package, rather than redux-logic

[mihaisavezi]

@nikksan How did you fix it, I am running into the same problem

[mihaisavezi]

If anyone else had this problem, you don't actually throw a SubmissionError. But I use redux-api-middleware with this package. You can use one of the actionCreators in the library. I just call stopSubmit('formName', errorObject) like this:

import { stopSubmit } from 'redux-form/immutable';

...

export const loginErrorLogic = createLogic({
  type: types.LOGIN_USER_ERROR,
  latest: true,
  process({ action }, dispatch, done) {

    if (action.payload.response.error === 'invalid_credentials') {
      dispatch(
        stopSubmit('login', {
          _error: 'Email address and password do not match.',
        }),
      );
    }
    done();
  },
});

[jeffbski]

Thanks for providing the followup @mihaisavezi

I haven't used redux-form in a while, I've been using formik these days since it is easier to test with (no need to setup a store).

https://github.com/jaredpalmer/formik

[Adiqq]

@jeffbski Can we have some example of how to use redux-logic with formik and yup? Especially how to integrate validation? Should validation at redux-logic be skipped altogether?