NgRx Schematics

NgRx is the great way to manage complex app state. Unfortunately, it is not a silver bullet and as the downside, it requires so much boilerplate code. Developers are lazy and machines must work for us. NgRx Schematics is a huge time-saver. It will automate NgRx code generation and give you the ability to focus on application business logic.

Transcript

1. NgRx Schematics
2. Vitalii Bobrov • 5 years in front-end • NgRx projects last 2 years • ngGirls mentor • open source contributor • Ex Rock Star @bobrov1989 https://vitaliy-bobrov.github.io/
3. Creativity
4. Boring Environment Setup
5. What are Schematics?
6. NgRx State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects…
7. ❞ Abstractions Cost
8. Two Types of Tasks BORING CREATIVE
9. Human vs Machine
10. Angular CLI
11. @angular-devkit/schematics
12. Schematic files update Schematic
13. Schematic files update Schematic
14. @ngrx/schematics •Action •Container •Effect •Reducer •Store •Feature
15. How to use NgRx Schematics?
16. ToDo List?
17. Counter?
18. The Knowledge Base we will build…
19. Star Wars Knowledge Base
20. Scaffold
21. Add NgRx dependencies
22. Initialize store and effects
23. Create NgRx feature
24. app.module.ts
25. reducers/index.ts
26. heroes.module.ts
28. heroes.actions.ts
29. How to extend Schematic?
30. ❞ We use Schematics to create Schematics
31. Create custom schematic
32. collection.json
33. Rule factory
34. templates
35. template
36. templates
37. test
38. Thank YOU! @bobrov1989 https://vitaliy-bobrov.github.io/