btroncone / ngrx-examples

@ngrx examples and resources

@ngrx examples

Angular 2 + ngrx examples, inspired by official redux examples.

Goal

These examples illustrate how to utilize ngrx within an Angular 2 application. This repository will be actively maintained and updated as new tools and functionality become available and best practices are established.

Contributions

As Angular 2 and ngrx are relatively new, patterns and best practices are still being established. Examples found in this repository demonstrate how I (or the project author) would structure the solution but discussion and refinement is always encouraged! Please open an issue, submit a pull request, or drop me a message on twitter to present a different approach or idea. This repository will feature the most solid, agreed upon techniques as they evolve.

Please add any additional Angular 2, ngrx, or reactive programming articles, repositories, or code samples you find useful. I will keep this list as up-to-date as possible!

Additional Resources

Additional Angular 2, ngrx, and reactive programming articles, repositories, and code samples:

Introduction

• Comprehensive Introduction to ngrx/store - Brian Troncone
• Reactive Angular 2 with ngrx - Rob Wormald
• @ngrx/store in 10 minutes - egghead.io - Brian Troncone

Articles

• Build a Better Angular 2 Application with Redux and ngrx - Lukas Ruebbelke
• Reactive Data Flow in Angular 2 - Wayne Maurer
• Understand and Utilize the Async Pipe in Angular 2 - Brian Troncone
• Communication Between Components & Components Design - Oren Farhi

Presentations and Slides

• Reactive Angular 2 - NG-NL 2016 - Rob Wormald
• Introduction to RxJS 5 - NG-NL 2016 - Gerard Sans
• Angular 2 Change Detection Explained - Pascal Precht
• Angular 2 and the Single Immutable State Tree - Ciro Nunes

Videos and Lessons

• Build Redux Style Applications with Angular2, RxJS, and ngrx/store - John Linquist
• Step-by-Step Async JavaScript with RxJS - John Lindquist
• RxJS Lessons from Ben Lesh - Ben Lesh
• RxJS Beyond The Basics - Creating Observables From Scratch - André Staltz
• Introduction to Reactive Programming - André Staltz
• Getting Started With Redux - Dan Abramov
• Asynchronous Programming - The End of the Loop - Jafar Husain

Repositories and Code Samples

• Official ngrx example application - Mike Ryan
• Echo Media Player - Media Player for YouTube - Oren Fahri
• Staffer ngrx/store example -Pavan Podila
• Angular 2 Time Machine - John Lindquist
• NgRx Example - Aleš
• Todo with Undo/Redo - Rob Wormald
• Instagram Filters - Instagram-like photo filter playground - Jay Kan

Utilities

• ngrx-store-localstorage - Sync local storage with ngrx state slices - Brian Troncone
• ngrx-store-logger - Advanced action/state logging for @ngrx/store applications - Brian Troncone
• ngrx-store-freeze - Prevent state from being mutated in @ngrx/store - Attila Egyed

Getting Started

# clone the repo
git clone https://github.com/btroncone/ngrx-examples.git

# cd into repo
cd ngrx-examples

# cd into project of your choice
cd counter

# install dependencies
npm install

# start the server
npm start

Build

Project builds are a stripped down version of Angular Class Webpack Starter, an exceptional Angular 2 seed project. Tests can be executed with either WallabyJS or Karma (soon!).

Examples

Counter

(source)

Summary

A counter which can be incremented, decremented, with the option to increment or decrement async.

Demonstrates

1. Creating a basic reducer
2. Selecting a slice of state
3. Using the async pipe
4. Dispatching actions from a component

Todos

(source)

Summary

Basic todo application with add, remove, and toggle complete functionality.

Demonstrates

1. Initial reducer state
2. Managing arrays in reducers
3. Multiple reducers
4. Combining data from two reducers to project state for view

Todos with Undo/Redo

(source | plunker)

Summary

Same as todos example but with undo/redo functionality.

Demonstrates

1. Creating a meta-reducer to add undo/redo capability.

Async

(source)

Summary

Request and display the latest Angular or React reddit posts, utilizing the reddit API.

Demonstrates

1. Handling async actions with @ngrx/effects
2. Conditionally making requests based on current state

Shopping Cart

(source)

Summary

Request sample inventory, add and remove items from shopping cart, checkout.

Demonstrates

1. Multiple Reducers
2. Handling effects with @ngrx/effects
3. Creating and applying selectors for state projection with let

Finances

(source) (tutorial)

Summary

Add and remove items financial operations, change currency rates

Demonstrates

1. Multiple Reducers
2. Handling effects with @ngrx/effects
3. Modifying state projection
4. Using state in pipes

Real World - In Progress!

More to Come!

ngrx-examples's Issues

Example App: Echoes Player (open source)

hi @btroncone
I developed Echoes Player with ngrx/store, ngrx/effects - following nice conventions using observables strategy. I think it's a good fit for the code samples section.
repo: http://github.com/orizens/echoes-ng2
production app: http://beta.echotu.be (or http://orizens.github.io/echoes-ng2)

Thanks.

Question on Shopping Cart example

@btroncone In the shopping-cart ngrx-example I am little confused on the switch case for RECEIVED_BOOKS

export default function (state = initialState, action: Action): BooksState {
    switch (action.type) {
        case RECEIVED_BOOKS:
            return {
                entities: Object.assign({},
                    state.entities,
                    action.payload.reduce((obj, book) => {
                        obj[book.id] = book;
                        return obj;
                    }, {})
                )
            };
        default:
            return state;
    }
};

In this case inside the case RECEIVED_BOOKS as I understand we are creating new entities array by using Object.assign with the existing state.entities but I did not understand the 3rd param to Object.assign function.
in this reducer we are receiving the books so we could have done like this also
entities:

Object.assign({}, state.entities, action.payload)

ASYNC: postsByReddit reducer

Should this be?

export interface RedditPostsArray {
    [index: string]: RedditPosts;
}

export const postsByReddit: ActionReducer<RedditPostsArray> = (state: RedditPostsArray = {}, action: Action) => {
    switch (action.type) {
        case INVALIDATE_REDDIT:
        case RECEIVE_POSTS:
        case REQUEST_POSTS:
            return <RedditPostsArray>Object.assign({}, state, {
                [action.payload.reddit]: posts(state[action.payload.reddit], action)
            });
        default:
            return state;
    }
};

Technical Review?

Hi guys,

Your examples here have been extremely helpful in understanding how to setup ngrx/store in an application. I'm still learning but I have just pushed an integration here:

The relevant pieces are here:
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/frameworks/i18n.framework/state/multilingual.reducer.ts
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/frameworks/i18n.framework/state/multilingual.actions.ts
Usage here:
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/frameworks/i18n.framework/components/lang-switcher.component.ts

Another reducer here:
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/frameworks/core.framework/state/route.reducer.ts
Usage here:
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/frameworks/core.framework/common/route-common.component.ts

Combining others with those here:
https://github.com/NathanWalker/angular2-seed-advanced/blob/master/src/main.web.ts#L26-L30

Curious if maybe I should follow the examples here:
https://github.com/ngrx/angular2-store-example

Whenever you get a chance, I would greatly appreciate your feedback.
Does this look like a good integration based on your understandings?
Thank you so much.

Why no selectors?

As far as I know, none of these examples use explicit selectors. Instead they just have selectors.

I'm just wondering if you are against the concept of selectors, didn't they they applied for these situations, or were just too lazy to use them. ;)

Webpack build errors

After npm start i get for every example the following errors.

Shopping cart example question. Is it necessary to call store.unsubscribe?

Looking in the shopping cart example I see unsubscribe being called on store during the OnDestroy hook of the component.
I'm getting a unsubscribe error when I attempt to do the same in my app. I don't see this being done in the brief component example on the ngrx/store readme.

Please forgive me if I'm missing something. I've been scaffolding my app based off this example and the main ngrx example project structure.
https://github.com/ngrx/example-app

remove items from shopping cart

i not see this functionality ????

what about this ??

Installation and Setup

While trying to install the ShoppingCart application on my local env. I tried running npm install however I am using windows and am getting errors like : Cannot find name 'require', Cannot find name 'Promise' I have also tried to run the command:typings install but still getting the same error.

Autosave feature in ngrx store

I would love to see an example of an auto-save feature implementation in ngrx store that would satisfy the following scenario:

(Let's say we have an app that allows users to store/retrieve their own html code.)

• /page1 loads and pulls up user html from service, then displays it in a textarea
• user edits the code
• user switches to /page2
• user switches back to /page1 and should see their html in its latest state
• by auto-save I mean just internal persistence, rather than real saving to db. The latter would be done on an explicit button click.

The path I think I would take would be to store the html as well as the loaded flag in the state, and when page1 loads, load the html only if "loaded" flag is false. But I don't know where to place this "if" test.

Anyway, a complete example (Angular2, TS) would be nice.

What the heck is "common" folder

Common doesn't covey anything meaningful to me. If all of your ngrx store stuff is in the that folder then why not give it a name that describes it like "state-management"?