【メモ】React,Reduxのリファクタリングはじめの一歩
よくわからないままはじめ、まさに習うより慣れよで身につけつつある Reduxスキル。 最初のほうに作ったソースを見直すと、ある共通点に気がつきました。
無駄なstateが多い!
propsで受け取った値をわざわざコピーしてstateで保持してたりします。 変更される値はイベントハンドラの引数で受け取れるので、捕捉した値を propsのイベントで上位のコンポーネントに伝搬してしまえば、stateを 用意する必要がある箇所をぐっと減らすことができました。
//before:こういうかんじの記述が多かった handleChange(e) { const textValue = e.target.value this.setState({ textValue: textValue }, this.props.onChange(textValue)) } //after:丸投げでスッキリ handleChange(e) { this.props.onChange(e.target.value) }
変更フォームなど、propsで変更前、stateで変更後の値を保持して 比較したり、リセットボタンを押したら変更前の値に戻すとか、そういう 時以外はstateは最小限がソースが見やすいな、と思いました。