Блог а-ля Хабр, выбор платформы

const PostForm = ({
  id, flow, title, content, hubs, isTranslation, sourceAuthor, sourceLink,
  isTutorial, searchHub, sourceFlows, sourceHubs, errors, isLoading, mainError,
  input, save
}) => (
  <div className={s.root}>
    <div className={s.container}>
      <h1>{!!id ? 'Редактирование публикации' : 'Хочу разместить публикацию'}</h1>
      <form onSubmit={handleSubmit(isLoading, save)} autoComplete="off">
        <PostFormIsTutorial {...{ isTutorial, input }} />
        <PostFormFlow {...{ flowId: flow.id, sourceFlows, input, error: errors.flow }} />
        <PostFormTitle {...{ title, input, error: errors.title }} />
        <PostFormContent {...{ content, input, error: errors.content }} />
        <PostFormSearchHub {...{ searchHub, sourceHubs, hubs, input, error: errors.searchHub }} />
        <PostFormHubs {...{ hubs, input, error: errors.searchHub }} />
        <PostFormIsTranslation {...{ isTranslation, input }} />
        <PostFormSourceAuthor {...{ sourceAuthor, isTranslation, input, error: errors.sourceAuthor }} />
        <PostFormSourceLink {...{ sourceLink, isTranslation, input, error: errors.sourceLink }} />
        <PostFormSubmit {...{ isLoading }} />
      </form>
      <br/>
      {!!mainError && <div>{mainError}</div>}
    </div>
  </div>
)

const required = value => value ? null : 'Required'
const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : null
const range = (value, min, max) =>
  value && value.length >= min && value.length <= max ? null : `Must be from ${min} to ${max} elements`

const validators = {
  flow: (value) => required(value.id),
  title: (value) => required(value) || maxLength(POST_FORM_TITLE_MAX)(value),
  content: (value) => required(value),
  searchHub: (value, state) => {
    const hubs = state.postForm.hubs
    return required(!isEmpty(hubs)) || range(hubs, 1, POST_FORM_HUBS_MAX)
  },
  sourceAuthor: (value, state) => {
    return state.postForm.isTranslation && required(value)
  },
  sourceLink: (value, state) => {
    return state.postForm.isTranslation && required(value)
  },
}

  input: ({ key, value, isValidate = false }) => (dispatch, getState) => {
    if (isValidate) {
      const validate = validators[key]
      if (!!validate) {
        const state = getState()
        const error = validate(value, state)
        if (state.postForm[key] !== error) {
          dispatch(setError({ key, error }))
        }
      }
    }
    if (value !== void 0) {
      dispatch(setField({ key, value }))
    }
  },

  save: () => (dispatch, getState) => {
    const state = getState()
    const errors = {}
    Object.keys(validators).forEach(key => {
      const validate = validators[key]
      const error = validate(state.postForm[key], state)
      if (!!error) {
        errors[key] = error
      }
    })
    if (!isEmpty(errors)) {
      dispatch(setErrors(errors))
      dispatch(appActions.setMainError('Исправьте ошибки в форме'))
      return
    }
    dispatch(appActions.setMainError())
    dispatch(appActions.setLoading(true))
    //...
  },