State Management in Angular with NgRx Stores and Effects

@FabianGosebrink Angular state management

@FabianGosebrink

@FabianGosebrink REST-Service <component>

@FabianGosebrink REST-Service <component> <component> <component> <component> <component> <component> <component> <component>

@FabianGosebrink

@FabianGosebrink REST-Service <component> <component> <component> <component> <component> <component> <component> <component>

@FabianGosebrink

@FabianGosebrink <content> <list> <form>

@FabianGosebrink

@FabianGosebrink REST- Service <content> <list> <form>

@FabianGosebrink REST- Service <content> <list> <form> @Input() @Input()

@FabianGosebrink

@FabianGosebrink REST- Service <content> <list> <form> @Output() @Output()

@FabianGosebrink

@FabianGosebrink REST- Service <content> <list> <form>

@FabianGosebrink

@FabianGosebrink State

@FabianGosebrink Where

@FabianGosebrink Change

@FabianGosebrink Effects

@FabianGosebrink

@FabianGosebrink Component Services

@FabianGosebrink

@FabianGosebrink Component

@FabianGosebrink

@FabianGosebrink Component

@FabianGosebrink Store Component

@FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction())

@FabianGosebrink Store Component Reducer store.dispatch(new LoadAllTodosAction())

@FabianGosebrink

@FabianGosebrink (oldState, action) => newState

@FabianGosebrink

@FabianGosebrink Store Component store.dispatch(new LoadAllTodosAction()) State { … } Reducer

@FabianGosebrink Store Component State { … } Reducer store.select(…) store.dispatch(new
LoadAllTodosAction())

@FabianGosebrink Container component Presentational component store.select(…) @Input(…) store.dispatch(…) @Output(…)

@FabianGosebrink

store.select(…) Effects

store.select(…) Effects Services

@FabianGosebrink

@FabianGosebrink { … }

@FabianGosebrink { }

@FabianGosebrink

@FabianGosebrink { todoFeature: { // … } }

@FabianGosebrink { todoFeature: { items: [], selectedItem: null, loading: false
} }

@FabianGosebrink

@FabianGosebrink Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com

State Management in Angular with NgRx Stores an...

State Management in Angular with NgRx Stores and Effects

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript