redux-form
Reduxのformを実装するライブラリ
github
dispatch(rest('hogeForm'))をしてもformがresetされない
原因は不明
対処法
reset()の代わりにdestroy()を使う
destroy
redux-formのstoteの'今'のvalueにアクセスしたい
方法1
redux-formのstoreにコンポーネント内でアクセスする
mapStateToPropsの中で流し込む
全部一気に取れる
初期値も、現在フォームに入っている値も
指定したformの全てのfieldの値を取れる
対称のformのルートが自分より親にいる場合に使える
formルート→→自分
方法2
formValueSelectorを使う
方法1と異なり、formの一つのfieldのvalueのみを取得する
もちろん複数の値も取れるが、その場合には適宜そのfield名を追加して記述する必要があるref
つまり、10個のfieldにアクセスしたい場合は、10個のfield名を書く必要がある
方法3
getFormValuesを使う
formのルートがどこにいても使える
↓こんなとき方法1ではアクセスできない(たぶん
code:txt
自分→子1
└─→子2→formルート
code:tsx
export default connect((state: ReduxState) => ({
values: getFormValues('formName')(state)
}))(HogeComponent);
方法4
https://github.com/erikras/redux-form/issues/4299#issuecomment-446939238
https://codesandbox.io/s/8k766888mj
code:ts
const Hoge: any = formValues('postsDifficulty')(
({ children, postsDifficulty }: any) => {
console.log('in hoge');
console.log(postsDifficulty);
return children(postsDifficulty);
}
);
<Hoge>{(f: any) => <div>{f}</div>}</Hoge>
初期値を登録する
初期値に親からのPropsもしくは、Stateを使う
code:tsx
const mapStateToProps = (state: ReduxState, ownProps: ThisComponenProps) => ({
initialValues: {
comment: ownProps.comment.comment,
hoge: state.hogeReducer.value
}
});
export default connect(mapStateToProps)(
reduxForm<{}, ThisComponentProps>({
form: 'thisComponent'
})(ThisComponent)
);
他のフィールドを編集するやつ
https://stackoverflow.com/questions/45230531/programmatically-change-redux-form-field-value
Redux-Formは死んだ
https://matwrites.com/redux-form-is-dead/
一文字うつごとの再描画回数がヤバい
個人的にredux-formで良かったと思うもの
validationの当てやすさ
saga内で任意のformの内容を操作できる