Question: Integration with redux-form #161
Description
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