Redux: It's Not Just for React
@borisonr
So what exactly is Redux...
  • "Predictable state container for JavaScript apps"
  • Evolution from Flux
  • Stores entire app's state in one place
Flux
  • created by Facebook in 2014
  • multiple stores and a dispatcher

  • more of a pattern than a framework
Redux
  • created by Dan Abramov in 2015
  • one store, multiple reducers
  • incredibly lightweight (2kB including dependencies)
vs.
"a computer program stores data in variables, which represent storage locations in the computer's memory. The contents of these memory locations, at any given point in the program's execution, is called the program's state."
So why do I need redux for my Angular app?
  • one-way data flow => happy app 
  • more organized, less scattered
  • avoid side effects
Observable Pitstop
  • Angular (2+) and Redux love observables 
  • Callbacks=>Promises=>Observables
  • Constant flow of data to subscribers
getMeSomeDataPlease().then(result =>{
    console.log('woohoo we have data', result)
})


getMeSomeDataPlease().subscribe(result =>{
    console.log('woohoo we have data', result)
})
promise
observable
Immutable Pitstop
  • redux values immutability=>super clear on outcomes
  • Libraries like Immutable.js will be your friend
Now let's actually use Redux...
  • Stores
  • Actions
  • Reducers

User

View

Model


    npm install @ngrx/core @ngrx/store@2.2.3 --save


export interface IAppState extends Map<string,any> {
    isEngaged: boolean;
}


function sheSaidYes(state, action) : IAppState {
   return state.set('isEngaged', action)
}


export const ProposalReducer = 
   (state:Map<string,any> = Map<string,any>({}), {type, payload}) => 
        {
            switch (type) {
                    case 'SHE_SAID_YES':
                        return sheSaidYes(state, payload);
                    default:
                        return state;
            }
        };
import { StoreModule } from '@ngrx/store';
import { ProposalReducer } from './store';

@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    StoreModule.provideStore({ProposalReducer})
    ],
  providers: []
  bootstrap: [AppComponent]
})

export class AppModule { }


export class AppComponent {
  public proposalStore: Observable<any>;
  public didSheSayYes: boolean;

  constructor(
    private store: Store<IAppState>) { }

   public ngOnInit(){
    this.proposalStore = this.store.select('ProposalReducer');
    this.proposalStore.subscribe(result => {
        this.didSheSayYes = result.get('isEngaged');
    })
   }

   public respond(response: boolean){
        this.store.dispatch({ 
                type: 'SHE_SAID_YES', 
                payload: response })
   }
}
ngrx vs. angular-redux
  • ngrx is a Redux-inspired architecture that is heavily observables-based
  • angular-redux uses Redux itself as a dependency, and adds some Angular helpers (dependency-injection, observable wrappers)
Bonus perk!
  • timetravel debugging/
live code editing
  • easy testing
  • undo/redo
Further reading
Made with Slides.com