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
   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

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

Answer 2

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