What is the best structure for app using ngrx?

前端 未结 2 865
伪装坚强ぢ
伪装坚强ぢ 2021-02-12 15:24

Structure 1

reducers
   index.ts //Combine all reducers
   user.reducer.ts
   product.reducer.ts
actions
   index.ts  //Combine all actions
   user.action.ts
            


        
相关标签:
2条回答
  • 2021-02-12 15:35

    I follow this guide for best ngRx practices and structure:

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

    The second way you mentioned is the best because (quoting from the style guide):

    DO create separated files in the reducer's directory for: reducer, reducer's spec, reducer's actions and reducer's selectors. Finally, use index.ts as a barrel for exporting each file's content. Why? it's easier when developing to locate each relevant class/file

    0 讨论(0)
  • 2021-02-12 15:50

    I have found the first structure to suit well for a rather small app when using reducers, actions or others in several SMART components in an app.

    Although it promotes the separation of concerns, I have found it rather tedious to jump between the various directories.

    Usually, working with, i.e, user.reducer.ts, would involve working with the other files: effect, actions etc. So, the 2nd approach seems a bit more tidy.

    I would like to suggest a 3rd structure that may fit and one which follows the "barrel" approach in 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
    

    With this structure, the user directory is a barrel which exposes the various logics components which can be imported separately just by importing the user, i.e:

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

    I'm experimenting with these approaches in my open source media player app - Echoes Player - http://github.com/orizens/echoes-player
    As mentioned in another comment, these strategies and architecture applied to echoes player are compiled in the ngrx styleguide

    0 讨论(0)
提交回复
热议问题