Question: Integration with redux-form

Can’t figure out the onSubmit method. Let’s say I have the following form:

const formConfig = { form: 'form', fields: ['name',] }

const stateToProps = (state) => {
  return state;
}

const dispatchToProps = (dispatch) => {
  return {
    onSubmit: ({ name }) => {
      // Should return a promise
    }
  }
}

@reduxForm(formConfig, stateToProps, dispatchToProps)
export class Todos extends React.Component {
  render() {
    const { fields: { name }, error, handleSubmit } = this.props;

    return (
      <form  onSubmit={handleSubmit}>
        <input type="text" {...name} />
        <button type="submit">Create</button>
        {error && <div>{error}</div>}
      </form>
    );
  }
}

From the redux-form docs:

If your onSubmit function returns a promise, the submitting property will be set to true until the promise has been resolved or rejected. If it is rejected with an object matching { field1: ‘error’, field2: ‘error’ } then the submission errors will be added to each field (to the error prop) just like async validation errors are. If there is an error that is not specific to any field, but applicable to the entire form, you may pass that as if it were the error for a field called _error, and it will be given as the error prop.

The saga could look like:

function* createTodo(action) {
   try {
      const todo = yield call(Api.createTodo, action.name);
      yield put({ type: 'CREATE_TODO_SUCCESS', todo });
   } catch (e) {
      yield put({ type: 'CREATE_TODO_FAILURE', reason: e.toString() });
   }
}

function* saga() {
  yield* takeEvery('CREATE_TODO', createTodo);
}

Then:

onSubmit: ({ name }) => {
  return new Promise((resolve, reject) => {
    dispatch({ type: 'CREATE_TODO', name });      
  });
}

How could I intercept the CREATE_TODO_SUCCESS and CREATE_TODO_FAILURE actions in the promise? I’m really stuck here.

/cc @erikras

[tokenvolt]

@rosendi I’m doing this way. In the form component:

onSubmit: (values) => {
  return new Promise((resolve, reject) => {
    dispatch(someActionCreator({ values, resolve, reject }))
  });
}

In saga:

function* saga() {
  while (true) {
    const { payload: { values, resolve, reject } } = yield take(TYPE)
    // use resolve() or reject() here
  }
}

[oanylund]

I do not know if these action creators are new or have some downside, but could we not just use the startSubmit and stopSubmit action creators and pass the form name with the submit action?

Example:

function* createEntity(entity, apiFn, formId, newEntity) {
  yield put( entity.request() )
  yield put( startSubmit(formId) )
  const {response, error} = yield call(apiFn, newEntity)
  if(response) {
    yield put( entity.success(response) )
    yield put( reset(formId) )
    yield put( stopSubmit(formId) )
  }
  else {
    yield put( entity.failure(error) )
    // handle and format errors from api
    yield put( stopSubmit(formId, serverValidationErrors) )
  }
}

Quite new to both redux-form and redux-saga, so there could be something i am missing here.