反応アプリは条件付きでreduxストアを聞くには？

Question

私はUniversity ManagementのReactアプリを持っています。

以下

は私のルータです：

<Route path="selecting/" component={SelectUniversity}> 
    <Route path="myUniversity" component={MyUniversity} /> 
    <Route path="studentdetails" component={AddStudentDetails} /> 
    <Route path="payment" component={Payment} /> 
</Route> 

フローは、このあたりのよう==> MyUniversity ==> AddStudentDetails ==>お支払い で、すべてが期待 すべての3つのコンポーネントMyUniversity、AddStudentDetailsとして働いています、お支払いはextensivly

01は次のように

MyUniversityのmapStateToPropsがあるReduxのストアを使用しています

function mapStateToProps(state) { const { results } = state.results const studentData = state.results.studentData return { results, studentData, } } function mapDispatchToProps(dispatch) { return bindActionCreators({ ...Actions, ...studentActions }, dispatch) } 

関与する多くの店の変数があり、これは、同様に試料目的 のために他の二つの成分のための別個のmapstaetopropsとmapdispatchtopropsあります。

今要件は（いくつかのやむを得ない理由のため）である： -

ユーザが直接以下、このようなIDを持つmyuniversityページに土地場合： - http://mywebsite.com/myuniversity/9999、 私は（9999に関連するデータを取得する必要があります既に取得しています）、同じフローを実行します。

<Route path="selecting/" component={SelectUniversity}> 
    <Route path="myUniversity" component={MyUniversity} /> 
    <Route path="myUniversity/:unidetails" component={MyUniversity} /> 
    <Route path="studentdetails" component={AddStudentDetails} /> 
    <Route path="payment" component={Payment} /> 
</Route> 

私は予想通り、既存のフローが動作するように私はReduxのストアを更新することができますどのようにデータを取得したら

私の更新のルータ。

私はajax呼び出しからデータを取得したら、私が望むように多くのアクションをディスパッチすることができますが、私は15-20の異なる状態変数が3つのコンポーネントのそれぞれに関わっていると言いました。そのため、各コンポーネントの負荷に非常に多くのディスパッチャを起動するスケーラブルなアプローチのようには見えません。 2

アプローチだから私は別のアプローチを思い付いた： - 1.新しい減速を定義します。 2.データストアを取得すると、ajaxの結果が状態で目的の形式になります。 3. 3つのコンポーネントのそれぞれのmapstatetopropに行き、純粋なレデューサーまたは現在のレデューサーからのデータを取得するかどうかにかかわらず、すべてのプロップレベルに条件を追加します。例えば

： - は私が午前ことを考えると、各支柱のレベル（の条件を追加し、その後、私のmapstatetopropsは再びこの

const { results } = state.results || state.universitydetails 

const studentData = state.results.studentData || state.universitydetails.studentData 

return { 
     results, 
     studentData, 
     } 

ようになりますuniversitydetails と呼ばれる別の減速を追加していると言うことができますmyuniversitに アドオンReduxの、佐賀とディスパッチアクション - ：3つの成分の各々における15~20異なる状態変数）

アプローチ3を使用してyロードしてそれに基づいて他のアクションを生成する しかし、これは一般的ではありません。 Incase、私はホステルのような他のもののためのsimliar機能を追加したいと思います。このhostlelsのためにサガを追加し、初期ロード時にアクションをディスパッチする必要があります。私は（間違っているなら、私を修正）最善の方法になると思う何

： - は私のコンポーネントは、（アプローチ2のようなが、コードをuglifyingせずに）、この減速に耳を傾け作る新しい減速と何とかを定義する場合とそう私はhostelselectorのような別の機能を追加したい、私はちょうど私が何とか これについて移動する方法を任意の提案で立ち往生しています。この新しい減速

に耳を傾ける私の新しい減速構造を更新し、私のコンポーネントを作成する必要がありますか？

Answer 1

OKアプリケーションの流れがわかり、それが私の考えです。

「SET_SOURCE」という1つのアクションに応答するレデューサーを1つ作成できます。そこで、現在のソースの名前を、そこからデータを抽出する場所に置きます。理想的には、データが保持されるレデューサー/オブジェクトの名前である必要があります。

その後、ソースごとにレデューサーを作成する必要があります。すべての情報源はそれ自身の責任を負い、相互に相互作用しません。つまり、あなたのAjaxコールが終了し、店舗内にデータを保存する必要がある場合（アクションを開始すると）、あなたはあなたが望む減速機をトリガーするアクションを開始します。

あなたの減速の構造は次のように考えられます。

=> myUniversity 
     => currentSource 
     => sources 
      => uniDetails 
      => hostel etc. 

あなたのmapStateToPropsあなたが現在のソースを選択するために、何か好きなことができインサイドcombineReducers機能

// myUniversityReducer.js 
import uniDetails from 'uniDetailsReducer' 
import hostel from 'hostelReducer' 
import currentSource from 'currentSourceReducer' 

const sources = combineReducers({hostel, uniDetails}) 
const myUniversity = combineReducers({currentSource, sources}) 

export myUniversity 

を使用して、この種の構造を達成することができます：

function mapDispatchToProps = (state) => { 
    const currentSource = selectCurrentSource(state) // currentSource = 'uniDetails' => name of the reducer 
    const dataFromSource = selectDataFromSources(state, currentSource) // dataFromSource = state[currentSource] => object inside uniDetails 

    // ... if here you need to manipulate data because the structure of every 
    // source is different, you can have your function that will do that based on the source name 

    return { ...dataFromSource } 
} 

私のアイデアだが、何かを見逃したり、シナリオのいくつかを誤解している可能性があります。