React Redux form and connect syntax

Question

I have a React component

export class Login extends Component {
      ..omitted for clarity
}
export default connect(select, actions)(Login);

And as can be seen it connects to Redux and it works perfectly well

I have Redux Form as

export class ChangePassword extends Component {
  ..omitted for clarity
}

export default reduxForm({
  form: 'change_password_form',
  validate
})(ChangePassword);

Again this is working perfectly well.

My question is , I can't work out the syntax to have the Redux form also to use the connect statement e.g. connect(select, actions)

Something like this ?

export default reduxForm({
  form: 'change_password_form',
  validate
}).connect(select, actions)(ChangePassword)

Enriquetaenriquez

Answer 1

Since the connect method decorates the original component, and returns a decorated component, you can pass that component to reduxForm (Redux Form FAQ).

You can see an example in the docs.

const decoratedComponent = connect(select, actions)(ChangePassword)

export default reduxForm({
  form: 'change_password_form',
  validate
})(DecoratedComponent)

Or pass it directly:

export default reduxForm({
  form: 'change_password_form',
  validate
})(connect(select, actions)(ChangePassword))

If you need to get data from the store, for example - to create the form's initial values from the state, you can wrap the original component with redux-form, and pass the "form" component to connect:

export default connect(select, actions)(reduxForm({
  form: 'change_password_form',
  validate
})(ChangePassword))

Or you can use functional composing with a compose method (from redux/lodash/ramda for example), to call reduxForm, and then connect on the component:

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'change_password_form', validate })
)(ChangePassword)

Godunov

thanks, I used . instead of (), I used the direct statement from your example – Enriquetaenriquez

Welcome. I've added another example for wrapping the form with connect. – Godunov

when I use the last option since I need to get data from state into redux-form, I get this error : Uncaught Invariant Violation: You must pass a component to the function returned by connect. – Hueyhuff

@Hueyhuff and for everyone that get this problem: I found a solution though. I described it in my post so I hope it will help you and you will understand what happened - codemenatalie.com/blog/connecting-redux-form-and-connect/ – Baptlsta

Answer 2

Applying multiple middlewares works like this:

middlewareB(middlewareA(Component))

In your case:

export default connect(select, actions)(reduxForm({})(ChangePassword))

Exactitude

Answer 3

I can guarantee this works, TypeScript herein optional:

(I am using combineReducer, hence the nested state imported to the component props.)

Here <any, any, any> is respectively, mapStateToProps, imported Action Creators, and the React Component wrapped with Redux Form.

const mapStateToProps = (state: any) => ({
  currentItems: state.itemsReducer.currentItem,
  initialValues: state.itemsReducer.currentItem,
  keepDirtyOnReinitialize: true,
});

//ReduxForm decorator populates the initialValues prop 
//from Connect into Field components with its library functionality:
export default connect<any, any, any>(mapStateToProps, {
  CreateItem,
  UpdateItem,
  getItemById
})(reduxForm({
  form: 'ItemsForm'
})(AddItemToList))

Ashburn

Answer 4

What you can do is create a wrapper class above the redux form and connect that to redux. And you can simply pass the props from that wrapper class to the redux form. Something like this:

//redux form
export class ChangePassword extends Component {
  ..omitted for clarity
}

export default reduxForm({
  form: 'change_password_form',
  validate
})(ChangePassword);

// wrapper class
export class FormWrapper extends React.Component {
  // omitted for clarity
}

export default connect(select, actions)(FormWrapper);

Foursome