CODEWITHSUNDEEP
reactjsreduxredux-form
Saswata Pal
Saswata Pal

Reputation: 434

Redux form with compose not working throwing error

Using react-redux immutable form, when I'm trying to pass redux-form inside redux compose it's throwing error "You must pass a component to the function returned by connect"

    import React from 'react';
    import { connect } from 'react-redux';
    import { compose } from 'redux';
    import { Field, reduxForm } from 'redux-form/immutable';
    
    import makeSelectUser from "./selectors";
    import actionCreators from "./actions";
    
    class EditUser extends React.PureComponent {

    }
    
    const mapDispatchToProps = bindActionCreators;
    
    const mapStateToProps = makeSelectUser();
    
    const withConnect = connect(
      mapStateToProps,
      mapDispatchToProps(actionCreators)
    );
    
    export default compose(
      withConnect,
      reduxForm({
        destroyOnUnmount: false,
        enableReinitialize: true,
        keepDirtyOnReinitialize: true,
        form: 'EditUser'
      })
    )(EditUser);

getting error

browser.js?40b6:38 Uncaught Error: You must pass a component to the function returned by connect. Instead received {"defaultProps":{"touchOnBlur":true,"touchOnChange":false,"persistentSubmitErrors":false,"destroyOnUnmount":false,"enableReinitialize":true,"keepDirtyOnReinitialize":true,"updateUnregisteredFields":false,"pure":true,"forceUnregisterOnUnmount":false,"form":"EditUser"}}

Upvotes: 3

Views: 2012

Answers (1)

nemesv
nemesv

Reputation: 139798

According to the How do I mapStateToProps or mapDispatchToProps you first need to connect your component and after that pass it to reduxForm.

So you need to switch the order of the arguments in compose:

export default compose(
  reduxForm({
    destroyOnUnmount: false,
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    form: 'EditUser'
  }),      
  withConnect
)(EditUser);

Note compose is

A function obtained by composing the argument functions from right to left.
For example, compose(f, g, h) is identical to doing (...args) => f(g(h(...args)))

Upvotes: 2

Related Questions