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
   

   View Slide

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/
   

   View Slide

3. Creativity
   

   View Slide

4. Boring
   Environment
   Setup
   

   View Slide

5. What are Schematics?
   

   View Slide

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…
   

   View Slide

7. ❞
   Abstractions Cost
   

   View Slide

8. Two Types of Tasks
   BORING
   CREATIVE
   

   View Slide

9. Human vs Machine
   

   View Slide

10. Angular CLI
    

    View Slide

11. @angular-devkit/schematics
    

    View Slide

12. Schematic files update
    Schematic
    

    View Slide

13. Schematic files update
    Schematic
    

    View Slide

14. @ngrx/schematics
    •Action
    •Container
    •Effect
    •Reducer
    •Store
    •Feature
    

    View Slide

15. How to use NgRx Schematics?
    

    View Slide

16. ToDo List?
    

    View Slide

17. Counter?
    

    View Slide

18. The Knowledge Base
    we will build…
    

    View Slide

19. Star Wars Knowledge Base
    

    View Slide

20. Scaffold
    

    View Slide

21. Add NgRx dependencies
    

    View Slide

22. Initialize store and effects
    

    View Slide

23. Create NgRx feature
    

    View Slide

24. app.module.ts
    

    View Slide

25. reducers/index.ts
    

    View Slide

26. heroes.module.ts
    

    View Slide

27. View Slide

28. heroes.actions.ts
    

    View Slide

29. How to extend Schematic?
    

    View Slide

30. ❞
    We use Schematics
    to create
    Schematics
    

    View Slide

31. Create custom schematic
    

    View Slide

32. collection.json
    

    View Slide

33. Rule factory
    

    View Slide

34. templates
    

    View Slide

35. template
    

    View Slide

36. templates
    

    View Slide

37. test
    

    View Slide

38. Thank YOU!
    @bobrov1989
    https://vitaliy-bobrov.github.io/
    

    View Slide