What is the best structure for app using ngrx?

Question

Structure 1

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


        

Answer 1

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