Reduxストア：水平方向の拡張

Reduxを使用するアプリケーションのサイズが十分に大きくなると、状態の数が何度も増加します。 レデューサーを論理ユニットに分割するには、それらをcomposeReducersと組み合わせるアプローチが使用されます。 このソリューションにより、 ストアを垂直方向に拡張できます。 しかし、この分離では十分でない場合があります。 たとえば、レベルの1つには複合ロジックが含まれており、共有することもできます（または有名な人の1人が言ったように、「深く！」）。 しかし、Redux APIにはそのようなアプローチはありません。 また、この問題の解決策を検索しても何も得られませんでした（おそらく私は見栄えが悪いでしょう）。 そこで、Redux Storeの水平方向の拡張アプローチを開発しました。



このアプローチを実装できる私のプロジェクトを紹介します。

使用する

1）最初に、第1レベルのレデューサーのレベルで、ライブラリ自体を接続します。

import {stateCombine, runCombine, getInitialState} from "redux-combine-deep-props";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2）第2レベルの減速機を接続します。

 import level2Module from "./reducer-level-2";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3）最初のレベルの初期値を作成します。

 let initialState = { propLevel1: ..., ... propLevelN: ... };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4）組み合わせのオブジェクトを作成します。

 let combinations = { <name prop>: { module: level2Module } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、将来のセクション名propの名前を設定します。そのために、このレベルのレデューサーと、このレベルの状態の変更をトリガーするための一連のタイプのesheneを設定します 。



5）現在の状態のハンドラー関数を作成します。

 let combineDeepProp = stateCombine(combinations); let combine = runCombine(combinations, combineDeepProp);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6）すべてのレベルの初期値を処理するには、結合された初期状態を作成します。

 const combineInitialState = getInitialState(combinations, initialState);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

7）エクスポートレデューサー関数では、結合された初期状態を使用し、その状態で、 厳密に状態が変化する前に、すべての組み合わせのハンドラーを開始します。これにより、現在のアクションタイプが指定のものと一致する場合、必要に応じて現在の状態が変更されます：

 export default function level1Module (state = combineInitialState, action) { ... let newState = combine(state, action); ... switch (action.type) { case "....": newState = { ...newState, ... }; break; ... }; ... return newState; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

8）2番目のレベルのモジュールは、その中の状態がこのレベルのコンテキストで提示されることを考慮して、標準スキームに従って作成されます。

 let initialState = { ... }; export default function search(state = initialState, action) { ... switch (action && action.type) { ... }; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、1つの違いがあります。現在のアクションの 未定義のチェックがあるはずです。 getInitialStateメソッドの最初のパスで初期状態を設定するために作成されました。

おわりに

このアプローチでは、複数のオブジェクトを組み合わせて使用​​するため、再帰モードで現在のレベルを「垂直に」無限に拡張できます。

 let combinations = { <name prop1>: { module: level2Module1 }, ... <name propN>: { module: level2ModuleN } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、水平に、各2+レベルで上記のアプローチを使用します。



→ ソース



UPD：

可変性の問題を指摘してくれたdagenに感謝します。 使用の原則が少し変更されました。p。7およびp。4を参照してください-アクションのセットが不要になりましたが、これまでの組み合わせを機能のさらなる拡張の対象として残しました。 このアプローチをPolymerJSの束で使用し 、次にVueJSで使用し、それぞれPolymer -reduxおよびvuedeuxライブラリを使用してReduxと統合したことに注意してください。 また、状態の特定のプロパティへのバインディングがパスに沿って行われるため、サブツリーの1つを変更するときにルート状態を変更する必要がなかったため、変更の問題は通りました。

UPD2：

プロジェクトをコンパイルするためのロールアップコレクターを追加しました