どちらが良いでしょうか？多くのコンポーネントでディスパッチを使用するか、データを収集してからすべてをディスパッチしますか？

Question

は私が

<Component> 
    <ChildComponent1 /> 
    <ChildComponent2 /> 
    <ChildComponent3 /> 
    <ChildComponent4 /> 
    <ConfirmButton /> 
</Component> 

子コンポーネントがどのように見えるのコンポーネントがあります。各選択値の変更に

@connect(data => data) 
class ChildComponent1 { 

change() { 
    this.props.dispatch(action.someAction());//it dispatch to store 
} 
render() { 
    return <select onChange={this.change}>{render select}</select> 
} 
} 

子コンポーネント値の派遣を、私はすべての子コンポーネントからのデータを収集するまで、私は何もしません。 収集した後にすべてのデータを送信するほうがよいでしょう。

render(
    return <Component> 
       <ChildComponent1 onChange={(data) => this.setState({data})} /> //uses arrow function in this place it is bad, but it is example 
       <ChildComponent2 onChange={(data1) => this.setState({data1})} /> 
       <ChildComponent3 onChange={(data2) => this.setState({data2})} /> 
       <ChildComponent4 onChange={(data3) => this.setState({data3})} /> 
       <ConfirmButton onApply={() => this.props.dispatch(this.getState())} /> 
      </Component> 
) 

より良いアプローチは何ですか？

Answer 1

ここで私はそれをやっています。私はあなたがJSをtraspileするためにbabelを使用していると仮定しており、あなたの行動は './redux/actions'で定義されています。 おそらく「babel-plugin-transform-decorators-legacy」を使用している、しかし、あなたはすべての子コンポーネントからのデータを収集しているかどうかを判断しますか「transform-class-properties」

import actions from './redux/actions'; 

const mapStateToProps = (state) => ({ 
    reducer: state.reducer, 
}); 

const mapDispatchToProps = { 
    onChangeAction: actions.someAction, 
}; 

@connect(mapStateToProps, mapDispatchToProps) 
class ChildComponent1 { 

    change =() => { 
    this.props.onChangeAction();//it dispatches to store 
    } 

    render() { 
    return (
     <select onChange={this.change}>{render select}</select> 
    ); 
    } 
}