reactjs - example - redux-form: Cómo mostrar valores de formulario en otro componente

redux form español

Question

Estoy usando redux-form 6.0.0-rc.5 y estoy tratando de mostrar los valores del formulario a medida que los ingresa el usuario.

Sin embargo, quiero que estos valores se muestren desde otro componente, no la forma redux en sí.

Entonces, mi arquitectura de aplicación simplificada sería así:

<App />              -> (main component -container ?-)
  <List />           -> (connect to form values and pass them down)
    <Elem />         -> (display form value)
  <Form />           -> (enter form values)

El componente es una forma redux montada en ''forma'' y está funcionando.

Form = reduxForm({
  form: ''formName''
})(Form)

¿Cuál sería una buena forma de obtener los valores de formulario (del estado form.formName.values) y enviarlos a mi componente de pantalla?

Cosas que he intentado:

• Conecte la aplicación a la tienda y mapStateToProps (form.formName.values) y luego páselo a Display como prop. Pero arroja un error ya que los valores no existen en el estado del formulario hasta que el usuario haya tipeado algo.

• Usando la función getFormValues (''formName'') proporcionada por redux-form dentro del componente List pero devuelve una función o no definida:

Elem

const Elem = ({ name }) => (
  <li>{name}</li>
)

Lista

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)

List = connect(
  state => ({
    values: getFormValues(''formName'')
  })
)(List)

Debe haber algo que me falta o aún no entiendo correctamente si es con forma de redux o redux en sí ... ¡Espero que alguien pueda iluminarme!

Gracias y que tengas un buen día.

Answer 1

Intenta usar

List = connect(
  state => ({
    values: getFormValues(state.form.formName)
  })
)(List)

en lugar. Al menos así es como funcionaba en v5, aunque allí el método se llamaba getValues y no getFormValues .

Editar: después de echar un vistazo rápido a los documentos, parece que en v6 deberás usar un formValueSelector : http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

Answer 2

formValueSelector() no es necesario.

También puede acceder directamente como una propiedad.

List = connect(
  state => ({
    formValues: {
       id: state.form.formName.values.id
    }
  })
)(List)

Igual que

List = connect(
  state => ({
    formValues: {
       id: formValueSelector(''formName'')(state, ''id'')
    }
  })
)(List)

Answer 3

Yo tuve el mismo problema. Aparentemente, ''valores'' es un nombre guardado en formato redux. Utilizando el consejo de Iurii Budnikov logré resolver el problema, simplemente cambie el nombre de la variable de ''valores'' a otra cosa en su llamada de conexión:

List = connect(
  state => ({
    formValues: getFormValues(state.form.formName)
  })
)(List)

Answer 4

Comenzando desde redux-form 6.0.0 (y sigue siendo el mismo en 7.0.0 ), puede usar la función formValueSelector() para seleccionar valores de cualquier formulario redux que tenga en su aplicación: http://redux-form.com/ 7.0.0 / docs / api / FormValueSelector.md /

import { connect } from ''react-redux'';
import { formValueSelector } from ''redux-form'';

const selector = formValueSelector(''formName'');

List = connect(
  state => ({
    name: selector(state, ''name'')
  })
)(List)