How to scale multiple forms?

[steven-haddix]

I'm playing through the universal redux example and I'm curious what the proper way to scale the application to have potentially dozens of forms?

Would you reuse the forms actions but have a different container for each form?

[diegohaz]

Hi, @steven-haddix

I create a container and an organism component for each form, reusing the Field component.

I can give you a better answer if you share the snippet of code you are doing.

[steven-haddix]

I don't have anything in a repo just yet. Mostly exploring the architecture and seeing how things work.

Do the forms all share the same store/form functions?

[diegohaz]

Do the forms all share the same store/form functions?

They share some, but not all. A PostCreationForm, for example, calls postCreate from store; a LoginForm would call something from an auth store; and so on.

import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import { postCreate, fromForm } from 'store'
import { createValidator, required } from 'services/validation'

import { PostForm } from 'components'

const onSubmit = (data, dispatch) => new Promise((resolve, reject) => {
  dispatch(postCreate.request(data, resolve, reject))
})

const validate = createValidator({
  title: [required],
  body: [required]
})

const mapStateToProps = (state) => ({
  initialValues: {
    _csrf: fromForm.getCsrfToken(state)
  }
})

export const config = {
  form: 'PostForm',
  fields: ['title', 'body'],
  destroyOnUnmount: false,
  onSubmit,
  validate
}

export default connect(mapStateToProps)(reduxForm(config)(PostForm))