![Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Two’
Recipe
Id: 2Title: ‘One’
Change second recipe’s
title to five](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-18-320.jpg)
![Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Id: 2Title: ‘One’
Change second recipe’s
title to five](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-19-320.jpg)
![Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Id: 2Title: ‘One’
Is the recipe changed?](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-20-320.jpg)
![Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Id: 2Title: ‘One’
Have the recipes changed?](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-21-320.jpg)
![Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Id: 2Title: ‘One’
Did the whole state
change?](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-22-320.jpg)
![Why not direct?
state.recipes[recipeId].name = newName;](https://image.slidesharecdn.com/redux-180408103847/85/Angular-Course-Flux-Redux-29-320.jpg)
Angular Course - Flux & Redux
- 1. FLUX
- 3. MVC FLUX
- 5. STATE
- 6. Game engine Store Recipes Waffles App Add RecipeRecipes Recipe…Omelette Pancakes Recipe… Recipe…
- 7. REDUX
- 10. ACTIONS
- 11. EVERYTHING IS AN ACTION Add Element Update Attributes Select Element Create Project Update Project
- 12. Actions are plain objects { type: ‘ADD_ELEMENT’, payload: ‘h1’ }
- 13. We use action creators const addElement = (tag) => ({ type: ‘ADD_ELEMENT’, payload: tag });
- 14. REDUCERS
- 16. Must return a new state — never modify previous one Pure Functions No Side Effects Only rely on input parameters REDUCERS
- 17. CHANGE DETECTION
- 18. Change Detection State Id: 1 Recipes[] Recipe Title: ‘Two’ Recipe Id: 2Title: ‘One’ Change second recipe’s title to five
- 19. Change Detection State Id: 1 Recipes[] Recipe Title: ‘Five’ Recipe Id: 2Title: ‘One’ Change second recipe’s title to five
- 20. Change Detection State Id: 1 Recipes[] Recipe Title: ‘Five’ Recipe Id: 2Title: ‘One’ Is the recipe changed?
- 21. Change Detection State Id: 1 Recipes[] Recipe Title: ‘Five’ Recipe Id: 2Title: ‘One’ Have the recipes changed?
- 22. Change Detection State Id: 1 Recipes[] Recipe Title: ‘Five’ Recipe Id: 2Title: ‘One’ Did the whole state change?
- 23. IMMUTABILITY
- 25. REFERENCE TREES State Recipes Omelette Pancaek User Adam T1 State Recipes Omelette Pancake User Adam T2
- 27. ACTION #2 State Recipes Omelette Pancaek User Adam State Recipes Omelett Pancake User Adam T1 T2 State Recipes Bacon Pancake User Adam T3
- 28. IN MEMORY State Recipes Omelette Pancaek User Adam State Recipes Pancake State Recipes Bacon T1 T2 T3
- 29. Why not direct? state.recipes[recipeId].name = newName;
- 30. OH, NO! State Recipes Omelette Pancaek User Adam State Recipes Pancake State Recipes Bacon T1 T2 T3 Omelett User Adam User Cat Pancake
- 31. OUT SIDE CHANGE State Recipes Omelette Pancaek User Cat State Recipes Pancake State Recipes Bacon T1 T2 T3
- 32. OH, NO! State Recipes Omelette Pancaek User Cat State Recipes Pancake State Recipes Bacon T1 T2 T3 Omelett User Cat User Cat Pancake
- 33. ANGULAR-REDUX
- 34. State to Angular Store Elements Element 1 Element 2 App Elements Elements Navigator Element 1 Element 2 RxJS recipes$ | async