2016-04-11 2 views
5

旧バージョンのAngular 1のコードベースで、ngReduxなどの新しい依存関係を導入したくない場合は、$ rootScope、$ broadcastなどの古典的なAngular 1機能を使い始めるのはひどい考えですか? Reduxのようなアーキテクチャを実装する$ on、$ watch?私はそれを参照してください

の方法は、それは以下のように行うことができます。

  • をストア/モデルの場合 - $rootScope.$broadcast(ACTION)
  • レデューサーを注入するサービスとして実装される使用> - >store.dispatch(ACTION)について$rootScope
  • を使用します$rootScopeとすること$on(ACTION)
  • コントローラは$rootScopeの変更を監視して$watchとし、ビューまたはビューを更新するとバインドできます直接に$rootScope性質
  • 限り、あなたは、 $rootScope性質に奇妙なアウトオブプレース変異を行うレデューサー内のすべてのアプリケーションロジックを維持し、最小、最大の欠点にコントローラーのコードを維持しないように規律しているよう

I Angular 1の高価なダイジェストサイクルのためにこれがひどいパフォーマンスを持つことがわかります。しかし、の不変のデータ構造に固執することもできます。

これは悪い考えですか?誰かがこれを試しましたか?

答えて

7

もちろん、あなたは$rootScopeだけを使って作業を行うことができます。しかし、あなたの国家に干渉する多くの目的があります。あなたがしたい場合

// reducer-like 
$rootScope.$on('COUNTER_INCREMENT', (e, action) => { 
    //I don't use += to emphase immutability of count property; 
    $rootScope.count = $rootScope.count + action.value; 
}); 

//action-ish creator 
$rootScope.$broadcast('COUNTER_INCREMENT', {value: 5}); 

//store subscribe-like 
$rootScope.$watch('count', (count) => { 
    //update something in your component 
}) 

は、あなたがそれを行うことができますが、そこは不明不変性の問題を参照してください。

見てみましょう。実際にはそうではないため、アクションハンドラが純粋であることを制御することは非常に困難です。

デフォルトのアクションハンドラはありません。ストアの初期状態を簡単に設定することはできません。そして、あなたはおそらく避けたいと思っている$watchとダイジェストを使います。

また、すべてのアップデートを購読することはできません.Reduxのように、時間のかかるものであればすべてリセットすることはできません。

Reduxをパターンとしてそのまま使用したい場合は、おそらくReduxのようなコードを作成するいくつかのヘルパーで終了します。

さて、なぜ単純な角度ユーティリティサービスからReduxのを使用して起動しない:ここでは

angular.module('app', []).factory('store',() => { 
    //if you have many reducers, they should be as separate modules, and imported here 
    function counter(state = 0, action) { 
    switch (action.type) { 
     case 'INCREMENT': 
     return state + action.value; 
     default: 
     return state; 
    } 
    } 

    // here you can add here middlewares that make Redux so powerful 
    return Redux.createStore(counter); 
}); 

私達は行きます。それがで必要とされる今、あなたは完全に独立したロジックを削減アクション今

angular.module('app').controller('MyController', ($scope, store) => { 
    store.subscribe(() => { 
    //you may not to care about $scope.$digest, if your action was triggered within angular scope as well 
    $scope.count = store.getState(); 
    }); 

    $scope.onClick =() => store.dispatch({type: 'INCREMENT', value: 1}); 
}); 

、あなたの加入者が派遣を起こした行動のことは知らない適切なセットアップを持って、あなたの行動の作成と行動のためのお店のサービスを使用することができますReduxパターン。

関連する問題