Angular Course - Flux & Redux

Components
Dispatcher
ActionsStores

Game engine
Store
Recipes
Wafﬂes
App
Add RecipeRecipes
Recipe…Omelette Pancakes Recipe… Recipe…

Component
Reducer
Store
DispatchSubscribe
Action
State

EVERYTHING IS AN ACTION
Add Element
Update Attributes
Select Element
Create Project
Update Project

Actions are plain objects
{
type: ‘ADD_ELEMENT’,
payload: ‘h1’
}

We use action creators
const addElement = (tag) => ({
type: ‘ADD_ELEMENT’,
payload: tag
});

Current State
Next State
Reducers
(processors)
Action

Must return a new state — never modify previous one
Pure Functions
No Side Effects
Only rely on input parameters
REDUCERS

Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Two’
Recipe
Id: 2Title: ‘One’
Change second recipe’s
title to ﬁve

Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Change second recipe’s
title to ﬁve

Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Is the recipe changed?

Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Have the recipes changed?

Change Detection
State
Id: 1
Recipes[]
Recipe
Title: ‘Five’
Recipe
Did the whole state
change?

OUR STATE
State
Recipes
Omelette Pancaek
User
Adam
T1

REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Adam
T1
State
Recipes
Omelette Pancake
User
Adam
T2

IN MEMORY
State
Recipes
Omelette Pancaek
User
Adam
State
Recipes
Pancake
T1 T2

ACTION #2
State
Recipes
Omelette Pancaek
User
Adam
State
Recipes
Omelett Pancake
User
Adam
T1 T2
State
Recipes
Bacon Pancake
User
Adam
T3

IN MEMORY
State
Recipes
Omelette Pancaek
User
Adam
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

Why not direct?
state.recipes[recipeId].name = newName;

OH, NO!
State
Recipes
Omelette Pancaek
User
Adam
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Adam
User
Cat Pancake

OUT SIDE CHANGE
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

OH, NO!
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Cat
User
Cat Pancake

State to Angular
Store
Elements
Element 1 Element 2
App
Elements Elements
Navigator
Element 1 Element 2
RxJS
recipes$ | async

More Related Content