react + reduxでのコンポーネント間の値の受け渡し、算出

Question

//state
{
state_A: x,
state_B: [
{
Y:y,
Z:z
}
:
:
]
}

//component
<component_A>//state_Aにxの値を渡す
<component_B>//state_Bにyの値を渡し、zの値を表示させる(z = x / y) 

上記のxの値、yの値が入力されたらzの値を算出させたいのですが
コンポーネントが違う場合どのようにしたらよいのでしょうか？

Answer 1

全面的なreduxの実装まで至らなくても、component_Aとcomponent_Bをrenderする親コンポーネント(コンテナ？)で再計算して送ればいいです。

component_A内のxや、
component_B内のyが
変更されたことを、親コンポーネントがどう知るか、がreduxとは異なって来ます。
下記の例示ではxやyはテキスト入力と仮定します。

■redux使用の場合
①component_A内のx入力要素のonChangeイベント等でmodelの関数をコール。

②modelでは数字チェック等行ってactionを作成してdispatch。この時reducerを通じてグローバルなstateに値保存。

③再度renderがかかるため、親コンポーネントにて、グローバルなstateからxやyの値を取得。zの再計算も行う。(別に②の時点でz計算しといて保存しとくのもありです)
④component_Aとcomponent_Bにxyz受け渡す。

■redux使用無しの場合
①component_Aに対して、親コンポーネント上でのx変更関数をpropsとして受け渡し。

②component_A内のx入力要素のonChangeイベントで数字チェック等行って①で渡されている親の関数を呼ぶ。

③親コンポーネントのx入力関数(①の中身)では単純にthis.setStateでxを保持。この時zも計算していっしょにsetState。

④setStateによる再renderがかかるので、component_Aとcomponent_Bにxyz受け渡す。

どちらもcomponent_Aなどの子コンポーネントは自身の中にxやyを保持せず、上位から落ちてくる作りとなります。これを「ステートレスコンポーネント」と言います。詳しいことは調べてください。
ステートレスにすることによって、上位から指定した事しかしなくなる(子の中で独自に持つデータが無い)ため使い回しが効きます。これは慣れると新しいHTMLタグを自分で作っていくかのようにプロジェクト中の武器になっていきますので、子となるコンポーネントはなるべくステートレスに仕上げたいですね。

Answer 2

上記のxの値、yの値が入力されたらzの値を算出させたいのですが

コンポーネントが違う場合どのようにしたらよいのでしょうか？

そういうときのための redux です。 react のコンポーネントで値が変更される毎にア
クションを dispatch します。 x が変更されたアクション、 yが変更された
アクションをうけて、 reducer で z の値を更新します。