Ajax 呼び出しを行うredux-formhandleSubmit関数では、Redux 状態のいくつかのプロパティが Ajax で必要になります (ユーザー ID など)。
handleSubmitフォームのコンポーネントで定義したい場合、これは簡単です: 必要なものを渡すために呼び出し、 mymapStateToPropsから読み取るだけです。this.propshandleSubmit
ただし、優れた React-Redux 開発者のように、ビュー コンポーネントとコンテナーを別々に作成するので、ビュー コンポーネントは動作がほとんどまたはまったくないシンプルなものになります。したがって、コンテナで handleSubmitを定義したいと思います。
繰り返しますが、シンプル - redux-form はそれを行うために設定されています。onSubmitinを定義するmapDispatchToPropsと、フォームはそれを自動的に呼び出します。
ただし、待っmapDispatchToPropsてください。還元状態にアクセスする方法はありません。
わかりました、問題ありません。必要な小道具をhandleSubmitフォームの値と一緒に渡すだけです。
handleSubmitうーん、待ってください、このメカニズムを使用してデータを渡すことは不可能です! 1 つのパラメーターを取得valuesし、別のパラメーターを追加する方法はありません。
これにより、次の魅力のない代替手段が残ります (そのうちの 1 と 2 が機能することを確認できます)。
1フォーム コンポーネントで送信ハンドラーを定義し、そこから、mapDispatchToProps から渡された独自のカスタム送信ハンドラー関数を呼び出します。これは問題ありませんが、私のコンポーネントは、フォームを表示するのに必要ではない redux 状態からのいくつかの props を知る必要があります。(この問題は redux-form に固有のものではありません。)
dumbSubmit(values)
{
const { mySubmitHandler, user} = this.props;
mySubmitHandler(values, user);
}
<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>
または、より簡潔に言えば、これはすべてアロー関数に組み合わせることができます。
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}
次に、このハンドラーを完全に不可知にするために、 this.props 全体をカスタム ハンドラーに戻すことができます。
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}
2 mapDispatchToPropsではなく、mergeProps で onSubmit を定義して、stateProps にアクセスできるようにします。Dan Abramov は、(パフォーマンス上の理由から) mergeProps を使用しないことを推奨しているため、これは最適ではないようです。
function mergeProps(stateProps, dispatchProps, ownProps) {
const { user } = stateProps.authReducer;
const { dispatch } = dispatchProps;
return {
...ownProps,
...dispatchProps,
...stateProps,
onSubmit: (values) => {
const { name, description } = values;
const thing = new Thing(name, description, []);
dispatch(createNewThing(thing, user.id));
}
}
3状態プロパティを、フォーム コンポーネントの入力コントロールにマップされていないredux-form フィールドにコピーします。valuesこれにより、に返されるパラメータでアクセスできるようになりますhandleSubmit。これは一種のハックのようです。
もっといい方法があるに違いない！
より良い方法はありますか？