Redux - アクションを正しくディスパッチする

Question

私のアプリでは、小さなアクションクリエーター関数を持っていて、アプリケーションの小さな部分にアクションを返します。論理的に「正確な&」になりたいと思っていましたが、コードを再利用可能にしておきたいという私の合理的なことです。

例を挙げると、どこにでも再利用されるReact 'tab'コンポーネントがあります。あるシナリオでは、「タブ」をクリックすると、「-1-タブがアクティブになります。もう1つのシナリオでは、「タブ」をクリックすると、そのタブがアクティブになります。また、上記の最初のシナリオとは異なる可能性があります。

私が考えた論理は、上記の各シナリオで2つのアクションクリエイターを派遣することでした。第1のものは明らかに共通のものであり、第2のものは各シナリオに固有のものである。

// rough code for illustrative purposes 
activateTab :() => { 
dispatch(actionCreator1); 
dispatch(actionCreator2); 
}, 
render:() => { 
<Tab onclick = { activateTab } 
} 

PROBLEM（？）： 私が派遣され、各アクションの作成者は、&は、その「違い」のアルゴリズムを実行して反応させる減速関数を呼び出すだろうと私に発生しました。私。上記のTabでは、ReactはすべてのDOM変更を2回再計算していますか？これは正しいです？誰かが確認してもらえますか？

これらのシナリオはどのように処理する必要がありますか？

各シナリオに固有のアクションタイプ（&、これによってアクションオブジェクト）を作成する必要がありますか？つまり、ディスパッチ機能は1つだけでなければなりません。

おかげで、

Answer 1

は、私は、各シナリオに固有のアクションタイプ（&ことにより、アクションオブジェクト）を作るべきか？

2つの異なるアクションをディスパッチする場合は、すでにこれを実行していると思われますか？私はあなたがそれ自身でそれを使用することがない場合SET_TABアクションを必要としないと思う、あなたが必要な唯一のものはあなたの減速機でより多くのアクションを聴くことです。

いずれの場合でも、あなたの前提は正しいですし、1つの減速器に多くの異なる動作を聞かせることは全く正常です。以下のようなものを見て、あなたのアクティブなタブの減速を考慮してください。

let initial = { 
    fooActiveTab: 0, // first foo tab is open 
    barActiveTab: 2, // third bar tab is open 
} 

function activeTab (state, action) { 
    switch (action.type) { 

    case 'SOMETHING_RELEVANT_TO_FOO': 
    case 'FOO_AJAX_SUCCESS': 
     return { 
     ...state, 
     fooActiveTab: action.payload // set current tab 
     } 

    default: 
     return state 

    } 
} 

タブの状態がアクティブなタブが何であるかを変更することがあり、物事の様々なに耳を傾け、これは、あなたの減速組成物は非常に明確になります。こうすることで、すべての関数呼び出しで2つのアクションをディスパッチする必要はありません。アクティブにしたいタブのIDを送信するだけで十分です。

私はあなたがだと思います。は上記を行いますが、Reactがdiff algoを実行するのを防ぐためではありません。 Reactのdiff/patchはA LOTとなり、あなたのアプリはまだまだ高速です。あなたが感じる遅さは、reconciliationのためではなく、DOMを変更する必要があるため、コンポーネントが実際に更新されているためです。