Redux-Formで作ったフォームに、初期値を設定する際に手こずったため、その方法をまとめました。
はじめに
通常のinput
タグのように、value
属性を記載するだけでは初期値を表示できず、Redux-Formが用意している専用のプロパティを利用する必要があります。
定数を渡す
Redux−Formを呼び出す際に、initialValues
プロパティを設定すればOK。
Redux-Formの各インスタンス(name
属性)に対し、下記のように初期値を設定する。
const formWrapped = reduxForm({
form: 'profile',
initialValues: {
userName: 'ほげほげ', //userNameの初期値は'ほげほげ'
email: 'hoge@mail.com' //emailの初期値は'hoge@mail.com'
}
})(ProfileEdit);
export default connect(
mapStateToProps,
{ getUserData }
)(formWrapped);
変数を渡す
私の場合は、reduxストア内の値をinitialValues
に渡したかったのですが、
そのような変数をinitialValues
に渡す方法がわからず、ここで手こずりました。
結論から言うと、変数を渡す場合は、mapStateToProps
の中にinitialValues
プロパティを追加します。
その上で、reduxFormを呼び出す際、mapStateToProps
を引数として設定することで、初期値を表示できます。
ただし、このままだと初回レンダリング時の値が表示されたままとなります。
(初回レンダリング時に値がnull
だと、initialValues
の中身が空欄のままになってしまいます。)
こちらはreduxFormにenableReinitialize:true
プロパティを追加することで、
求める挙動にすることができます。
const mapStateToProps = state => {
return {
selectedUser: state.selectedUser,
//mapStateToPropsの中にinitialValuesプロパティを追加
initialValues: {
userName: state.selectedUser.userName,
email: state.selectedUser.email
}
}
}
const formWrapped = reduxForm(
{
form: 'profile',
enableReinitialize: true //enableReinitializeプロパティを追加
},
mapStateToProps //mapStateToPropsを引数に設定
)(ProfileEdit);
export default connect(
mapStateToProps,
{ getUserData }
)(formWrapped);
参考リンク
https://github.com/redux-form/redux-form/issues/916
https://stackoverflow.com/questions/41267037/redux-form-initial-values-from