Jak przekazać nazwę formularza dynamicznego w postaci redux?

Question

Próbuję użyć tego kodu, aby przekazać dynamiczną nazwę formularza do reduxForm.

Oto kod, który znalazłem:

let FormAddress = compose(connect((state, props) => ({form: props.form})), reduxForm({destroyOnUnmount: false, asyncBlurFields: []}))(ValidationForm); 

z tego artykułu: https://github.com/erikras/redux-form/issues/603#issuecomment-254271319

Ale nie jestem pewien, co się dzieje.

To jak jestem obecnie robi to:

const formName = 'shippingAddress'; 
const form = reduxForm({ 
    form: formName 
}); 

export default connect(mapStateToProps)(CityStateZip); 

Ale chciałbym, aby móc przekazać go za pomocą rekwizytów, takich jak to:

const formName = 'shippingAddress'; 
const form = reduxForm({ 
    form: props.form 
    // validate 
}); 

export default connect(mapStateToProps)(CityStateZip); 

Ale gdy próbuję że , narzeka, że ​​nie wie, czym są rekwizyty - ponieważ uważam, że wykracza to poza zakres powyższej funkcji.

Czy ktoś może mi pomóc?

Answer 1

W tym fragmencie zasadniczo używana jest funkcja compose z biblioteki redux. Oto coś można spróbować ...

<FormAddress name="shippingAddress" />

Więc w pliku components/FormAddress.js

import React from 'react'; 
import { compose } from 'redux'; 
import { connect } from 'react-redux'; 
import { reduxForm } from 'redux-form'; 

class FormAddress extends React.Component { ... } 

const mapStateToProps = (state, ownProps) => { 
    return { 
     form: ownProps.name, 
     // other props... 
    } 
} 

export default compose(
    connect(mapStateToProps), 
    reduxForm({ 
     //other redux-form options... 
    }) 
)(FormAddress); 

Nadzieja to pomaga!

Answer 2

Komponent rodzic który wywołanie komponentu FormAddress powinien przesłać nazwę formularza w rekwizytów jak props.form:

var formId="SomeId" 
<FormAddress form={formId} /> 

// and in your FormAddress component have 
const form = reduxForm({ 
    //no need to put form again here as we are sending form props. 
}); 

Działa to dla mnie.