reactjs - example - react router redux push

¿Cómo incrustar la misma forma redux varias veces en una página?

Question

Tengo un problema al intentar incrustar varios formularios en una página. Noté que configForm ejecuta una vez, incluso con múltiples formularios en la página, por eso no puedo generar dinámicamente diferentes nombres de formularios.

Captura de pantalla que muestra varios campos de texto unidos .

function configForm(){
  const uuid = UUID.generate();

  const config = {
    form:`AddCardForm_${uuid}`,
    fields:[''text''],
    validate:validate
  }

  return config;
}

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

¿Cómo puedo agregar los formularios para que se comporten de forma independiente?

Answer 1

Hay dos formas de incrustar el mismo formulario varias veces en la página.

1. Usando formKey (Redux Form 5)

formKey es la forma oficial de hacer esto cuando se usa redux-form@5 (o más abajo). Tiene que pasar la clave del padre para identificar el formulario:

panels.map(panel =>
  <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} />
                              ^^^^^^^ 
                       declare the form key
)

La definición de su formulario sería:

reduxForm({form: "AddCardForm", fields: ["text"], validate})

Sin embargo, este patrón se ha eliminado de redux-form@6 .

2. Usando un nombre de form único (Redux Form 5 y superior)

El siguiente patrón es la forma recomendada de identificar formularios desde Redux Form 6. Es totalmente compatible con versiones anteriores.

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} />
                              ^^^^ 
                    declare the form identifier
)

La definición de su formulario sería:

reduxForm({fields: ["text"], validate})
// No `form` config parameter here!