読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

React + TypeScriptでredux-formのformの値を初期化する

redux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。

注意点としては、redux-formの型定義ファイルにinitialValuesが定義されてないので自分でプロパティをはやしてやる必要があるという点です。

interface FormData {
    lhsField: string;
    rhsField: string;
}

interface IndexPageProps extends ReduxForm.ReduxFormProps {
    lhs?: number;
    rhs?: number;
    answer?: number;
    initialValues?: FormData; // 自分ではやす
    init?: () => void;
}

あとは、reduxForm関数に渡すselect関数でinitialValuesを適当にstateから抜き出してやればOK。

function select(state: rootReducers.AppState): IndexPageProps {
    return {
        lhs: state.calc.lhs,
        rhs: state.calc.rhs,
        answer: state.calc.answer,
        initialValues: {
            lhsField: state.calc.lhs && state.calc.lhs.toString(),
            rhsField: state.calc.rhs && state.calc.rhs.toString()
        }
    };
}

export default ReduxForm.reduxForm({
    form: 'IndexForm',
    fields: ['lhsField', 'rhsField']
}, select, {
    init: calcActions.init
})(IndexPage);

ソース全体

GitHubに上げておきました

github.com