Redux 表单与 compose 不工作抛出错误

Question

使用 react-redux 不可变形式，当我尝试在 redux compose 中传递 redux-form 时抛出错误“您必须将组件传递给 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);

获取错误

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"}}

Answer 1

根据 How do I mapStateToProps or mapDispatchToProps，您首先需要 connect 您的组件，然后将其传递给 reduxForm。

所以你需要调换compose中参数的顺序：

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

注意 compose 是

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)))

Redux 表单与 compose 不工作抛出错误

Redux form with compose not working throwing error

reactjs

redux

redux-form