ngrx/reduxアクションコンテキストのベストプラクティス

Question

このシナリオのベストプラクティスを見つけようとしますが、見つけられません。

問題： 私は私の例では 家庭todos.actionsとスポーツドス・アクションのように、私は同じに-dos.actionファイルを使用したい、アクションファイルを繰り返したくはありません。同じ還元剤。

例：私は例えばTODOアプリケーションを作成 が、私はそれが家（効果や減速）に派遣するタイプ「ADD_TODO_ASYNC」でアクションをディスパッチすると、この例では、あなたが問題を見ることができる、とスポーツ（効果そして、減速）

todos.actions.ts

const ADD_TODO_ASYNC = 'ADD TODO ASYNC'; 
const ADD_TODO_COMPLETE = 'ADD TODO COMPLETE'; 
const ADD_TODO_FAILD = 'AD TODO FAILD'; 

class addTodoComplete { 
    type = ADD_TODO_COMPLETE; 
} 
class addTodoFaild { 
    type = ADD_TODO_COMPLETE; 
} 

export type Actions = addTodoComplete | addTodoFaild; 

sport.effects.ts

@Injectable() 
export class SportTodosService { 

    @Effect() ADD_TODO_ASYNC$ = this.actions$.ofType(TodosActionTypes.ADD_TODO_ASYNC) 
    .map(toPayload) 
    .swithMap((todo: Todo) => this.api.addTodo(todo)) 
    .map((todo: Todo) => TodosActionTypes.addTodoComplete(todo)) 
    constructor(
     private actions$: Actions, 
     private api: api 
    ) { } 

} 

home.effects.ts

export class HomeTodosService { 
    @Effect() ADD_TODO_ASYNC$ = this.actions$.ofType(TodosActionTypes.ADD_TODO_ASYNC) 
     ... 
    constructor(
     ... 
    ) { } 

} 

減速

function todosReducer(state, action: TodosActionTypes.Actions) { 
    switch (action.type) { 
     case TodosActionTypes.ADD_TODO_COMPLETE: 
      return state; 
     default: 
      return state; 
    } 
} 

app.module.ts

@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     StoreModule.forRoot({ 
     sport: todosReducer, 
     home: todosReducer, 
     }), 
     EffectsModule.forRoot([ 
     SportTodosService 
     HomeTodosService, 
     ]) 
    ], 
    providers: [ 
     api 
    ], 
    bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

私はこのシナリオのためのベストプラクティスであるかを理解しようと？ 「HOME_ADD_TODO」のようなコンテキストでアクションを書き込む&「SPORT_ADD_TODO」？

または正式な方法がありますか？あなたが解決策を知っていれば

、解決策はReduxのためであれば気にしたり

感謝にそれらのケース内のすべての

Answer 1

この問題を理解するには、アプリのアーキテクチャを再度検討する必要があります。 一般的に再使用可能な減速機/アクションは正しくありません。

なぜ間違っていますか？現在の見方では、再使用可能な減速機とアクションを記述するのはすばらしいようで、定型文は少なく、「DRY」ではありません。あなたのアプリの例で。ホームとスポーツのための 'ADD_TO_DO'は等しいです。

将来的にはあなたの上司/コスチュームがスポーツで未来を必要としていると考えて、は危険です。再利用可能な減速機のロジックを変更した場合。あなたのアプリは壊れます。 （再利用可能な減速機をif文でパッチを当てて動作させることはできますが、アプリが大きくなると柔軟性/可読性/保守性は向上しません）。

そうですね、この場合は2つの減速機と2つのアクションファイルを書く必要があります。現在ではそれは同等ですが、将来的にはそれが有利でフレキシブルになるでしょう。

幸運！

Answer 2

ソリューションをngrxしていないことは、アクションの名前空間を使用することです

アクション定数アクションの一意の識別子として動作します。ストアの異なるスライスに対応するアプリケーションには多くのアクションが存在する可能性があるため、ストアを重複した論理的な障害から守る1つの方法は、アクション名前空間の概念を使用することです。これをチェックアウト： - 通常あなたが現在いる機能モジュールの名前を

// todos.actions.ts 
export const ADD_TODO = '[Home] Add Todo'; 

を我々は単に理想的には、我々が使用している店舗のスライスの名前に対応して、そのアクション定数に名前空間を追加します取りかかっている。

ログアクションを使用してアプリケーションをデバッグすることがわかった場合、この名前空間によって、トラブルシューティングを行っている店舗スライスとアクションコンテキストを明確にすることができます。 「スポーツ」）します

[Home] Add Todo 
[Home] Add Todo Success 
[Sport] Add Todo 
[Sport] Add Todo Success 

は詳細

Answer 3

HereでSOURCEをチェックngrxためのパターンと実践の一部とのリンクです。

これは、あなたが記述した方法で動作することを意図しています。 this.actions$はObservableなので、どこでも使用できます。 TodosActionTypes.ADD_TODO_ASYNCはhome.effects.tsとsport.effects.tsの両方で同じタイプなので、両方の場所で発光します。

あなたのケースでは別のアクションを避けることはできませんが、ボイラープレートコードの量を減らすことはできます。

私はこのような何かをしようとするだろう：

todos.actions.ts

abstract class addTodoComplete{ 
    constructor(readonly type: string){ 
     //rest of the behavior 
    } 
} 
abstract class addTodoFailed{ 
    constructor(readonly type: string){ 
    //rest of the behavior 
    } 
} 

todos.sport-actions.ts

const ADD_TODO = "[Sport] Add Todo"; 
const ADD_TODO_FAILED = "[Sport] Add Todo Failed"; 
class sportsAddTodoComplete extends addTodoComplete{ 
    constructor(){ 
     super(ADD_TODO); 
     //rest of the behavior 
    } 
} 
class sportsAddTodoFailed extends addTodoFailed{ 
    constructor(){ 
    super(ADD_TODO_FAILED); 
     //rest of the behavior 
    } 
} 

同じホームバージョンのために行きます。

さらに、SportTodosActionTypesとHomeTodosActionTypesが別々のものになっている可能性があります。

"コピー貼り"からあなた自身を完全に救うことはできませんが、ある程度助けてください。

EDIT：減速用として

、このアプローチを使用すると、2つのレデューサーを記述する必要がありますことは事実ですが、それは

「コピー＆ペースト」の仕事である必要はありません。 sports.reducer.ts

import { todoReducer } from './reducer'; 

export function sportsTodoReducer(state, action: SportTodoActionTypes.Actions){ 
    todoReducer(state, action); 
} 

バージョンはhomeと似ています。