What is the best structure for an application 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 found that the first structure is suitable for a rather small application when using reducers, actions, or others in several SMART components in the application.

Although this helps to delimit problems, I found it rather tedious to jump between different directories.

Usually work with, i.e. user.reducer.ts , associated with working with other files: effect, actions, etc. So the second approach seems a bit neater.

I would like to suggest a 3rd structure that can fit, and one that 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 

In this structure, the user directory is a barrel that provides various logic components that can be imported separately only by importing the user, that is:

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

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

Answer 2

I follow this guide for best practices and ngRx structure:

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

The second way you talked about is the best, because (quoting a style guide):

DO create split files in the gear catalog for: gear, gear specifications, gear actions and gear selectors. Finally, use index.ts as a barrel to export each file content. Why? easier to design to search for each corresponding class / file