2016-07-21 7 views
6

Struktura 1Jaka jest najlepsza struktura aplikacji korzystającej z 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 

LUB

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

Czy możesz dodać więcej komentarzy z kodem –

+4

Osobiście podoba mi się pierwsze podejście. Jest to struktura używana przez zespół ngrx w ich przykładowej aplikacji. Poza tym, masz jeszcze jeden folder dla interfejsów lub klas i często może się zdarzyć, że użyjesz tego samego interfejsu na więcej niż jednym reduktorze. Często używasz tych samych akcji na więcej niż jeden efekt i tak dalej. Dlatego wolę pierwszą strukturę. –

Odpowiedz

4

znalazłem pierwszą strukturę dobrze dostosowane dla raczej małych aplikacji przy użyciu reduktory, akcje lub inne w kilku SMART komponentów aplikacji.

Chociaż promuje oddzielenie obaw, okazało się dość nudne przeskakiwać między różnymi katalogami.

Zazwyczaj praca z, np. user.reducer.ts, wymagałaby pracy z innymi plikami: efektem, działaniem itp. Tak więc drugie podejście wydaje się nieco bardziej uporządkowane.

chciałbym zaproponować 3rd strukturę, która może zmieścić i jedną, która jest zgodna z podejściem „beczki” w 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 

Dzięki tej konstrukcji, użytkownik katalog jest beczka, która odsłania różne elementy logiki, które mogą być importowane osobno tylko importując użytkownika, tj:

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

ja eksperymentuje z tych podejść w moim otwartym źródłem media player aPP - Echoes Player - http://github.com/orizens/echoes-player
Jak wspomniano w innym komentarzu, te strategie i architektura zastosowane do echa odtwarzacza są kompilowane w ngrx styleguide

+0

Tak też myślałem. –

+0

Pochylałem się w ten sam sposób. Jednak dużym problemem z podziałem opartym na cechach (dla mnie) jest to, że niektóre funkcje zależą od innych. Za każdym razem, gdy to się dzieje, łamie mi głowę, jak podzielić najczystsze. – Michael

1

śledzę ten przewodnik dla najlepszych praktyk i struktury ngRx:

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

Drugi sposób ty wymienione jest najlepsze, ponieważ (cytując z przewodnika po stylach):

DO tworzy oddzielne pliki w katalogu reduktora dla: reduktora, specyfikacji reduktora, działania reduktora i selektorów reduktorów. Na koniec użyj index.ts jako baryłki do eksportowania zawartości każdego pliku. Dlaczego? Łatwiej jest opracować, aby zlokalizować każdą odpowiednią klasę/plik

Powiązane problemy