web-dev-qa-db-ja.com

mapStateToPropsとReduxフォームをエクスポートする方法は？

ログインページにReduxForm（ver。6）を使用しています。私がやりたいのは、ユーザーがフォームに入力して[送信]をクリックし、自分の州からテキストを取得して、最終的にそのメールアドレスとパスワードを使用してアクションをディスパッチできるようにすることです。ただし、react-reduxからの接続とReduxフォームの両方を使用しているときに、このコンポーネントをエクスポートするのに問題があります。

React-reduxを使用して、状態を小道具にマッピングするときに、connectはそのようにエクスポートされる必要があります。

デフォルトのconnect（mapStateToProps）（LogInForm）をエクスポートします

ただし、Redux Formは、次のようにエクスポートを設定する必要があります。

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

これら2つを組み合わせる方法はありますか？私は次のようなことを試しました：

const reduxFormConfig = reduxForm({
  form: 'LogInForm',
  validate,
});

export default connect(mapStateToProps)(ReduxFormConfig)(LogInForm)

しかし、それは機能しませんでした。

または、おそらくそれはこれを処理するためのより良いアプローチですか？これが私のコンポーネント内からの完全なコードです：

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import InputField from '../InputField';
import { validateLogInSignUp as validate } from '../../utils/validateForms.js';

const LogInForm = (props) => {
  const {
    handleSubmit,
    pristine,
    submitting,
  } = props;

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Field
          name="email"
          type="email"
          component={InputField}
          label="email"
        />
        <Field
          name="password"
          type="password"
          component={InputField}
          label="password"
        />
        <div>
          <button type="submit" disabled={submitting}>Submit</button>
        </div>
      </form>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    loginInput: state.form,
  };
};

// export default connect(mapStateToProps)(LogInForm)

// export default reduxForm({
//  form: 'LogInForm',
//  validate,
// })(LogInForm);

ありとあらゆる助けに感謝します。ありがとう！

reactjsreduxreact-reduxredux-form
10
hidace

redux-formを使用すると、LoginFormで直接状態にアクセスする必要はありません。代わりに、フォームの送信時に親コンポーネントの値にアクセスする必要があります。

// LoginForm.js
const LogInForm = (props) => {
  ...
};

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


// Parent.js
import LoginForm from './LoginForm';

const handleSubmit = (values) => {
  alert(JSON.stringify(values));  // { email: '[email protected]', password: '1forest1' }
};

const Parent = (props) => {
  return (
    <LoginForm onSubmit={ handleSubmit } />
  );
};

単純なフォームのより完全な例については、 https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42 を参照してください。

4
Ashley 'CptLemming' Wilson

ReduxFormv6でこれら2つを組み合わせる方法はまだあります。

reduxForm({
  form: 'LogInForm',
  validate,
})(LogInForm);

export default connect(mapStateToProps)(LogInForm)

方法は次のとおりです。

import React, { Component } from 'react';
import { connect } from 'react-redux

class LogInForm extends Component {
    ...
}

function mapStateToProps(state) {
    return { ... }
}

function mapDispatchToProps(dispatch) {
    return { ... }
}

// First decorate your component with reduxForm
LogInForm = reduxForm({
  form: 'LogInForm',
  validate,
})(LogInForm);

// Then connect the whole with the redux store
export default connect(mapStateToProps, maDispatchToProps)(LogInForm)
10
doncredas

あなたはこれを試すことができます：

import React from 'react';
import { connect } from 'react-redux' ;
import { reduxForm } from 'redux-form';

class Example extends React.Component {
    ...
}

function mapStateToProps(state) {
    return { ... }
}

function mapDispatchToProps(dispatch) {
    return { ... }
}

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
      form: 'formname',
      validate
})(Example));
4
Shivani

同じ問題のスレッドが複数あります。 最近、私のソリューションをここに投稿しました ただし、いくつかのバリエーションがあります。

  1. 関数ベースではなくクラスベースのコンポーネントを使用しました。私はその方法を具体的に実装するためのガイドを見つけ、react-reduxのconnectメソッドがそれを高階コンポーネントにするので、クラスインスタンスで最もよく使用されることを説明しています。

  2. @doncredasで述べたように、reduxFormとreact-reduxのconnectメソッドは別々に実装する必要がありますが、私の実装は次のとおりです。

    function mapStateToProps(state) {
    return { form: state.form };
}

Signin = connect(mapStateToProps, actions)(Signin);
Signin = reduxForm({
 form: 'signin'
})(Signin);
export default Signin;

[後で追加]別のバリエーションは次のとおりです。

const form = reduxForm({ form: 'signin' });
export default connect(mapStateToProps, actions)(form(Signin));
2
JaysQubeXon