How to use redux-form - 10 common examples

// api call
    const request = saga.next().value;
    expect(request).toEqual(call(userApi.register, payload));

    // api error
    const error = 'error';
    const response = saga.throw({ data: error }).value;
    expect(response).toEqual(put({
      type: REGISTER_ERROR,
      payload: { error },
    }));

    // stop form submit
    const stoppedSubmit = saga.next().value;
    expect(stoppedSubmit).toEqual(put(stopSubmit(REGISTER)));
  });
});

function* createOrUpdateEvent(form, event) {
  try {
    // indicate start submitting form
    yield put(startSubmit(form))
    if (form === 'event-create') {
      // get user id
      const uid = yield select(getUserId)
      // create event into database
      const ref = yield call(eventCrud.create, { ...event, owner: uid })
      // go to event page
      yield put(push(`/organizer/event/${ref.id}`))
      // reset form
      yield put(reset(form))
    } else {
      // update event into database
      yield call(eventCrud.update, event)
      // update event in store
      yield put(eventData.update(event))
    }
    // set form submitted
    yield put(stopSubmit(form))
  } catch (error) {
    yield put(stopSubmit(form, { _error: error.message }))
    throw error
  }
}

const FORM = 'event-create'
  try {
    // indicate start submitting form
    yield put(startSubmit(FORM))
    // get user id
    const uid = yield select(getUserId)
    // create event into database
    const ref = yield call(eventCrud.create, { ...event, owner: uid })
    // reset form
    yield put(reset(FORM))
    // set form submitted
    yield put(stopSubmit(FORM))
    // go to event page
    yield put(push(`/organizer/event/${ref.id}`))
  } catch (error) {
    yield put(stopSubmit(FORM, { _error: error.message }))
    throw error
  }
}

export function* createCollectionF(): any {
  while (true) {
    const { collection } = yield take(CREATE_COLLECTION);
    yield all([
      put(jobStatus(true)),
      put(startSubmit('add_or_edit_collection')),
    ]);
    const { response, error } = yield call(createCollection, collection);
    yield all([
      put(jobStatus(false)),
      put(stopSubmit('add_or_edit_collection')),
    ]);
    if (response) {
      // update the entity
      // NOTE: the user collection locate in userCollections
      yield put(setItem('userCollections', response));
      // get current search path in url if startsWith ?add_to_collection&id=
      const { search } = getHistory().location;
      const searchParams = new URLSearchParams(search);
      if (searchParams.has('step') && searchParams.has('id')) {
        // get id from url
        yield put(push(`?add_to_collection&id=${searchParams.get('id')}`));
      } else {
        yield put(push(`/collections/${response.id}`));
      }
    } else {
      yield fork(handleCommonErr, error, CREATE_COLLECTION, { collection });

function* createEvent(event) {
  const FORM = 'event-create'
  try {
    // indicate start submitting form
    yield put(startSubmit(FORM))
    // get user id
    const uid = yield select(getUserId)
    // create event into database
    const ref = yield call(eventCrud.create, { ...event, owner: uid })
    // reset form
    yield put(reset(FORM))
    // set form submitted
    yield put(stopSubmit(FORM))
    // go to event page
    yield put(push(`/organizer/event/${ref.id}`))
  } catch (error) {
    yield put(stopSubmit(FORM, { _error: error.message }))
    throw error
  }
}

function* updateEvent(form, event) {
  try {
    // indicate start submitting form
    yield put(startSubmit(form))
    // update event into database
    yield call(eventCrud.update, event)
    // update event in store
    yield put(eventsData.update(event))
    // set form submitted
    yield put(stopSubmit(form))
  } catch (error) {
    yield put(stopSubmit(form, { _error: error.message }))
    throw error
  }
}

function* submitTalkToEvent({ talkId, eventId, data }) {
  const FORM = 'submit-talk'
  const talk = yield select(talksData.get(talkId))
  try {
    // indicate start submitting form
    yield put(startSubmit(FORM))
    // check if it's already submitted
    const alreadySubmitted = yield select(isSubmitted(talkId, eventId))
    // submit talk
    yield call(saveTalkSubmission, talk, eventId, data, alreadySubmitted)
    // set form submitted
    yield put(stopSubmit(FORM))
    yield put({ type: 'SUBMISSION_NEXT_STEP' })
  } catch (error) {
    yield put(stopSubmit(FORM, { _error: error.message }))
    throw error
  }
}

function* createOrUpdateTalk(form, talk) {
  try {
    // indicate start submitting form
    yield put(startSubmit(form))
    if (form === 'talk-create') {
      // get user id
      const uid = yield select(getUserId)
      // create talk into database
      const ref = yield call(talkCrud.create, { ...talk, speakers: { [uid]: true } })
      // go to talk page
      yield put(push(`/speaker/talk/${ref.id}`))
      // reset form
      yield put(reset(form))
    } else {
      // update talk into database
      yield call(talkCrud.update, talk)
      // update talk into store
      yield put(talkData.update(talk))
      // go to talk page
      yield put(push(`/speaker/talk/${talk.id}`))

* @param {string} password - the password field value to validate
 * @param {string} blankFieldErrorMessage - the error message to be displayed
 * when the password value is empty
 * @param {string} minimumLengthErrorMessage - the error message to be displayed
 * when the password value is too short
 */
const validateChangePasswordFields = (password,blankFieldErrorMessage,minimumLengthErrorMessage) => {
  const minimumLength = 22;
  if (!password || password.trim() === '') {
    return blankFieldErrorMessage;
  } else if(password.length < minimumLength){
    return minimumLengthErrorMessage;
  }
}

export default reduxForm({
  form: 'changePasswordForm',  // a unique identifier for this form
  fields: ['old_password', 'new_password', 'new_password_confirm'],
  validate: function submit(values) {
    let errors = {},
      new_password = values.get('new_password'),
      new_password_confirm = values.get('new_password_confirm');
    const minimumLengthErrorMessage = I18n.t('changePassword.min_pwd_error');
    //Old password validations
    errors.old_password = validateChangePasswordFields(values.get('old_password'),
                          I18n.t('changePassword.enter_old_password'),minimumLengthErrorMessage)
    //New password validations
    errors.new_password = validateChangePasswordFields(new_password,
                          I18n.t('changePassword.enter_new_password'),minimumLengthErrorMessage)
    //Confirm-New password validations
    errors.new_password_confirm = validateChangePasswordFields(new_password_confirm,
                          I18n.t('changePassword.confirm_new_password'),minimumLengthErrorMessage)

<div>
          <p>
            {' '}
            {I18n.t('signup.already_account')}{' '}
            <a href="#">
              {' '}
              {I18n.t('signup.log_in')}{' '}
            </a>{' '}
          </p>
        </div>
      
    );
  }
}

export default reduxForm({
  form: 'registerAccountForm', // a unique identifier for this form
  fields: ['accountName', 'password', 'password_retype', 'secure', 'understand'],
  //Form field validations
  validate: function submit(values) {
    let errors = {};
    //Account name field validations
    let accountError = ChainValidation.is_account_name_error(values.get('accountName'));

    if (accountError) {
      errors.accountName = accountError;
    } else {
      if (!ChainValidation.is_cheap_name(values.get('accountName'))) {
        errors.accountName = I18n.t('signup.premium_acc_text');
      }
    }