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.

回答1:

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.