feat(store): add createFeature

[markostanimirovic]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/ngrx/platform/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Closes #2974

What is the behavior?

Example 1:

// products.reducer.ts
interface State {
  products: Product[];
  activeProductId: number | null;
  filter: string;
}

const initialState: State = {
  products: [],
  activeProductId: null,
  filter: '',
};

export const productsFeature = createFeature({
  name: 'products',
  reducer: createReducer(
    initialState,
    on(ProductsPageActions.enter, /* ... */),
    on(ProductsApiActions.loadSuccess, /* ... */),
  ),
});

// products.selectors.ts
import { productsFeature } from './products.reducer';

export const {
  selectProductsState,
  selectProducts,
  selectActiveProductId,
  selectFilter,
} = productsFeature;

export const selectProductsPageViewModel = createSelector(
  selectProducts,
  // ...
);

// products.module.ts
import { productsFeature } from './products.reducer';

StoreModule.forFeature(productsFeature);

Example 2: (with application state)

interface AppState {
  products: ProductsState;
}

interface ProductsState {
  products: Product[];
  activeProductId: number | null;
  filter: string;
}

const initialState: ProductsState = {
  products: [],
  activeProductId: null,
  filter: '',
};

export const productsFeature = createFeature<AppState>({
  name: 'products',
  reducer: createReducer(
    initialState,
    // ...
  ),
});

Does this PR introduce a breaking change?

[ ] Yes
[x] No

[ngrxbot]

Preview docs changes for ac54fb0 at https://previews.ngrx.io/pr3033-ac54fb03/

[wesleygrimes]

I love this 👏

[nartc]

This is great! Now if createFeature also returns a collection of dispatchable actions, that'd be 💋

[wesleygrimes]

This is great! Now if createFeature also returns a collection of dispatchable actions, that'd be 💋

Yep! Then no need for facades haha

[nartc]

This is great! Now if createFeature also returns a collection of dispatchable actions, that'd be 💋

Yep! Then no need for facades haha

I'm curious. Going to try something out from this branch

[markerikson]

Yep, love seeing the cross inspiration here!

[GregOnNet]

This is great! Now if createFeature also returns a collection of dispatchable actions, that'd be 💋

NgRx Ducks provides self-dispatching Actions: https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/createduck

It also extracts plain action creators:
https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/getactions

[timdeschryver]

This is looking great, here and there I left some comments and questions.
We should also add a test to make sure that we can use createFeature to create feature here.

[timdeschryver]

LGTM 👏👏

[brandonroberts]

LGTM

[brandonroberts]

Thanks @markostanimirovic!

[markgoho]

@brandonroberts

🤔

[brandonroberts]

😅 The docs weren't published. I'll push them up tomorrow

[FritzHerbers]

I am missing some best practice guidance for createFuture.

How are "sub" states to be handled, similar https://ultimatecourses.com/blog/ngrx-store-understanding-state-selectors, see Feature state selectors, e.g. products -> pizzas -> entities.
Also when using multiple reducers with combineReducers.

• Should the "sub" states implemented at is own (flatten the states) ? e.g. StoreModule.forFeature(pizzas), StoreModule.forFeature(entities) ?
• Or, having one feature 'products' and one reducer, with all actions for the "sub" features inside, and selecting the sub state somehow (at on()) ? how?

[FritzHerbers]

@markostanimirovic
Thanks for your reply at https://dev.to/markostanimirovic/comment/216ob

For feature states with nested reducers, I recommend using the "traditional" way without createFeature.

Maybe your comment should be added to the documentation.