React、Redux、React-Router？

Question

アプリケーションアーキテクチャの質問。 ページに多くのコンポーネント(look at the picture)（mains）があるとします。 メインの子供のコンポーネント（アクティブ/非アクティブ）を切り替えるのに、どんな効果がありますか？ ページ（1、2、3、次）？ 両方のタスクでreact-routerを使用できますか？ P.:レンダリングにReactJSを使用しています

Answer 1

私は結果フィルタリングに反応ルータを使用しません。 Reduxを使用しているので、あなたのレデューサーをメインセクションに分割し、アクティブ/非アクティブの状態とセクションごとの現在のページをすべて1つのストアに保持することができます。

Answer 2

私はこのページでreact-routerを使う必要はないと思います。

あなただけの以下のように、減速により（アクティブ/アクティブではない、1,2,3、次の）状態を制御する必要があります

case NEXT_PAGE: 
    return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1}; 

をそして、あなたは、あなたがこの上で表示するデータを取得することができます小道のページ。

mapStateToProps(state) { 
    return { 
     list: state.xxx.list, 
     currentPage: state.xxx.page 
     totalPage: state.xxx.total 
    } 
} 

Answer 3

キーは使用例です。あなたは以下のユースケースを持っている場合：

1. ユーザーがフィルタリングされた結果とページのリンクを貼り付けコピーして、他の人
2. ユーザーブックマークでフィルタリング結果ページを共有し、後でそれに戻って来ています。

次に、私は反応ルータを使用すると言うでしょう。

あなたは、このようなルートを持つことができます。 <Route path="main/:status/:page" component={Main}/>

その後のparamsオブジェクトは、自分のメインコンポーネントに小道具として注入されるだろう。

ユーザーがボタンをクリックすると、反応ルータからのpushを使用してルートを変更するか、反応ルータからLinkを単に使用します。 （reduxでディスパッチアクションを使用するか、ローカル状態として保存した場合はthis.setStateを使用するのではなく）。

私はそれがreduxまたはローカル状態でそれを格納するよりも難しくないと思う、上のより多くのユースケースの追加の利点。

Answer 4

実用的でスケーラブルなアプリケーションアーキテクチャが必要な場合は、スターターキットを使用することをお勧めします。

良いスターターキットのwikiでは、選択したデザイン原則が説明されます。

ヘッドレスバックエンドと組み合わせる私の好きなスターターキットの1つはReact Redux starter kitです。