Key Takeaways

Put state in a shared place separate from features
Effects, components, and actions belong to features
Some effects can be shared
Reducers reach into modules’ action barrels

Folder structure followed in the workshop

├─ books\
│     actions\
│         books-api.actions.ts
│         books-page.actions.ts
│         index.ts                  // Includes creating names for the exports
│      books-api.effects.ts
│     
├─ shared\
│       state\
│          {feature}.reducer.ts     // Includes state interface, initial interface, reducers and local selectors
│          index.ts
│

The index file in the actions folder was using action barrels like the following:

import * as BooksPageActions from "./books-page.actions";
import * as BooksApiActions from "./books-api.actions";

export { BooksPageActions, BooksApiActions };

This made easier and more readable at the time of importing it:

import { BooksPageActions } from "app/modules/book-collection/actions";

Folder structure followed in example app from @ngrx

├─ books\
│     actions\
│         books-api.actions.ts
│         books-page.actions.ts
│         index.ts                  // Includes creating names for the exports
│     effects\
|         books.effects.spec.ts 
|         books.effects.ts 
|     models\
|         books.ts 
│     reducers\
|         books.reducer.spec.ts 
|         books.reducer.ts 
|         collection.reducer.ts 
|         index.ts 
│     
├─ reducers\
│        index.ts  /// Defines the root state and reducers
│

The index file under the reducers folder is in charge of setting up the reducer and state

import * as fromSearch from '@example-app/books/reducers/search.reducer';
import * as fromBooks from '@example-app/books/reducers/books.reducer';
import * as fromCollection from '@example-app/books/reducers/collection.reducer';
import * as fromRoot from '@example-app/reducers';

export const booksFeatureKey = 'books';

export interface BooksState {
  [fromSearch.searchFeatureKey]: fromSearch.State;
  [fromBooks.booksFeatureKey]: fromBooks.State;
  [fromCollection.collectionFeatureKey]: fromCollection.State;
}

export interface State extends fromRoot.State {
  [booksFeatureKey]: BooksState;
}

/** Provide reducer in AoT-compilation happy way */
export function reducers(state: BooksState | undefined, action: Action) {
  return combineReducers({
    [fromSearch.searchFeatureKey]: fromSearch.reducer,
    [fromBooks.booksFeatureKey]: fromBooks.reducer,
    [fromCollection.collectionFeatureKey]: fromCollection.reducer,
  })(state, action);
}

The index file under app/reducers/index.ts defines the meta-reducers, root state, and reducers

/**
 * Our state is composed of a map of action reducer functions.
 * These reducer functions are called with each dispatched action
 * and the current or initial state and return a new immutable state.
 */
export const ROOT_REDUCERS = new InjectionToken<
  ActionReducerMap<State, Action>
>('Root reducers token', {
  factory: () => ({
    [fromLayout.layoutFeatureKey]: fromLayout.reducer,
    router: fromRouter.routerReducer,
  }),
});

Personally, I like how the example-app is organized. One of the things that I will add is to have all the folders related to ngrx in a single folder:

├─ books\
│     store\
│        actions\
│            books-api.actions.ts
│            books-page.actions.ts
│            index.ts                  // Includes creating names for the exports
│        effects\
|            books.effects.spec.ts 
|            books.effects.ts 
|        models\
|            books.ts 
│        reducers\
|            books.reducer.spec.ts 
|            books.reducer.ts 
|            collection.reducer.ts 
|            index.ts 
│     
├─ reducers\
│        index.ts  /// Defines the root state and reducers
│

Blog

NGRX Workshop Notes - Folder Structure

Alfredo Perez

Key Takeaways

Folder structure followed in the workshop

Folder structure followed in example app from @ngrx

Join Our Newsletter. No Spam, Only the good stuff.

Related