Structure 1
reducers
index.ts //Combine all reducers
user.reducer.ts
product.reducer.ts
actions
index.ts //Combine all actions
user.action.ts
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
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