Redux-Formで作成したフォームに初期値を渡す方法 #React

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