wojtek1150

import { Action } from '@ngrx/store';  
  
export const LOAD_USERS = '[Users] Load Users';  // It's good practice to add namespace for each action module
export const LOAD_USERS_FAIL = '[Users] Load Users Fail';  
export const LOAD_USERS_SUCCESS = '[Users] Load Users Success';  
  
export class LoadUsers implements Action {  
  readonly type = LOAD_USERS;  
}  
  

wojtek1150

import * as fromUsers from '../actions/users.action';  
import { Users } from 'resources/users/users';  
  
export interface UsersState {  
  entities: Users.Entities;  
  loaded: boolean,  
  loading: boolean  
}  
  
export const initialState: UsersState = {  

wojtek1150

import { Store } from '@ngrx/store';
import * as fromStore from '../../store';
export class MyComponent(){
    constructor(private store: Store<fromStore.UsersState>) { }
    loadUsers(){
       this.store.dispatch(new fromStore.LoadUsers());
    }
}

wojtek1150

@Injectable()  
export class UsersEffect {  
  constructor(  
    private actions$: Actions,  
    private usersService: UsersService  
  ) {}  
  
  @Effect()  
  loadUsers$ = this.actions$  
    .ofType(usersActions.LOAD_USERS)  

wojtek1150

this.users$ = this.store.select(fromStore.getAllUsers);
<ul>
    <li *ngFor="let user of $users | async">...</li>
</ul>

wojtek1150

this.subscription$ = this.store.select(fromStore.getAllUsers).subscribe(users => {
... // do something with data
this.users = users // just an example
}
//on destroy
this.subscription$.unsubscribe();
<ul>
    <li *ngFor="let user of users">...</li>
</ul>

wojtek1150

export const getUsersEntities = createSelector(getUsersState, fromUsers.getUsersEntities);  
export const getAllUsers = createSelector(getUsersEntities, (entities) => Object.keys(entities).map(id => entities[id]));  
export const getUsersLoaded = createSelector(getUsersState, fromUsers.getUsersLoaded);  
  
export const getAdminUsers = createSelector(  
  getAllUsers,  
 (users: Users.List): Users.List => users.filter(user => user.isAdmin)
);

wojtek1150

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }

wojtek1150

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [

wojtek1150

constructor(
    private angularFireAuth: AngularFireAuth
) { }

login() {
    const authProvider = new firebase.auth.GoogleAuthProvider();
    this.angularFireAuth.auth.signInWithRedirect(authProvider);
}

logout() {