メンチカツ

ロースカツが好きです

【メモ】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は最小限がソースが見やすいな、と思いました。