- We have an empty angular app with eagerly loaded module called
posts
- We want to add @ngrx/store and @ngrx/store-devtools
- Get familiar with Redx DevTools: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
- Add minimal setup to start using store
- Check that state is properly initialized using store-devtools
- Display data from store in
PostListComponent
- Create interface describing posts state. See
State
in posts.reducer.ts-node - Create
initialState
and use it to initalize your store.
- Select state from store and display it (no typing at the moment)
- Create global
appState
- Apply types on store and state selection
- Show different ways to read state
- Create actions and update posts reducer
- Dispatch actions from component
- Observe store state modifications in Store DevTools. Explore Action, State and Diff buttons
- More efficient to manage large collections (faster lookups by id
entities
map, preserve orderids
array) - Simpler reducer code
- Discover adapter, selectors