2016-07-21 125 views
6

結構1使用ngrx的應用程序的最佳結構是什麼?

reducers 
    index.ts //Combine all reducers 
    user.reducer.ts 
    product.reducer.ts 
actions 
    index.ts //Combine all actions 
    user.action.ts 
    product.action.ts 
effects 
    index.ts //Combine all effects 
    user.effect.ts 
    product.effect.ts 
selector 
    //Combine all selectors 
    user.selector.ts 
    product.selector.ts 

OR

user 
    user.reducer.ts 
    user.action.ts 
    user.effect.ts 
    user.selector.ts 
product 
    product.reducer.ts 
    product.action.ts 
    product.effect.ts 
    product.selector.ts 
reducers.ts //Combine all reducers 
actions.ts //Combine all actions 
effects.ts //Combine all effects 
selectors.ts //Combine all selectors 
+0

您能否使用您的代碼添加更多註釋 –

+4

我個人喜歡第一種方法。這是ngrx團隊在其示例應用程序中使用的結構。除此之外,你還有一個接口或類的文件夾,並且經常會發生這樣的情況:你在多於一個reducer上使用相同的接口。您還經常在多於一種效果上使用相同的操作等等。這就是爲什麼我更喜歡第一個結構。 –

回答

4

我已經在一個應用程序的幾款智能組件使用減速機,行動或別人的時候發現適合爲好一個相當小的應用程序的第一個結構。

雖然它促進了關注的分離,但我發現在各個目錄之間跳轉非常繁瑣。

通常,與user.reducer.ts一起工作會涉及到處理其他文件:效果,操作等等。所以,第二種方法似乎更整齊一些。

我想建議,可能適合第三結構和一個跟隨在angular2的「桶」的方法:

- store 
    - user 
     - index.ts 
     - user.actions.ts 
     - user.effects.ts 
     - user.reducer.ts 
     - user.reducer.spec.ts 

    // the store definition file - will expose reducer, actions etc.. 
    // for connecting those to the app in the bootstrap phase 
    - index.ts 

在這種結構中,用戶目錄是暴露的各種桶這可以只通過導入用戶分別導入邏輯組件,即:

import { reducer as UserReducer } from '../store/user'; 
// or 
import { UserReducer } from '../store/user' 

我在我的開源媒體播放器應用這些方法的實驗 - Echoes Player - http://github.com/orizens/echoes-player
作爲另一則留言中提到,這些戰略和架構應用於呼應玩家彙集在ngrx styleguide

+0

這就是我的想法。 –

+0

我傾向於同樣的方式。但是,基於特徵的劃分(對我而言)的一個大問題是,某些特徵取決於其他特徵。每次它發生時,我都會打斷我的頭腦,想知道如何將它們分離成最乾淨的。 – Michael

1

我按照本指南最佳NGRX做法和結構:

https://github.com/orizens/ngrx-styleguide

第二種方式你(引自風格指南):

DO在reducer的目錄中創建單獨的文件:reducer,reducer的spec,reducer的動作和reducer的選擇器。最後,使用index.ts作爲桶來導出每個文件的內容。 爲什麼?開發定位每個相關類/文件時更容易

相關問題