CODEWITHSUNDEEP
reactjsreduxredux-form
d0pe
d0pe

Reputation: 583

multiple Redux-form with formValueSelector

I'm trying to create multiple forms that have dependable dropdowns. Based on selection on dropdown1, some fields are shown and another dropdown is populated.

To achieve the multiple forms, I have to pass a unique form key such as:

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`PanelForm_${panel.uuid}`} />
)

However, to connect to state for changes, I have to use the redux formValueSelector which requires to set it to the form name passed which is dynamic and I don't know how to pass it here...

const selector = formValueSelector('PanelForm_XXXX')
                                    ^^^^^^^^^^^^^^
const FormConnectDecorator = connect((state) => {
  const category = selector(state, 'category')
  return {
    category,
  }
})(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

I need to connect the form to redux state to read category value but can't seem to pass the correct dynamic form name value to it.

Upvotes: 0

Views: 227

Answers (1)

d0pe
d0pe

Reputation: 583

After a bit more browsing, as formValueSelector returns a function, the solution is to use it in mapStateToProps. Credits to rizedr on https://github.com/erikras/redux-form/issues/1987

const mapStateToProps = (state, initialProps) => {
  return {
    category: (formValueSelector(initialProps.form))(state, 'category'),
  };
};
const FormConnectDecorator = connect(mapStateToProps)(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

export default FormDecoratedComponent

@Mods - Feel free to delete this question if you will. Answer already exists in redux-form github closed issues, link provided above.

Upvotes: 1

Related Questions