@title[Kennisoverdracht Redux]

##              Kennisoverdracht
##                    Redux

### Robin de Bondt, Luc van der Zandt, Marc Bosman

---

@snap[north span-40]

##               1. Wat is redux?

![Redux logo](docs/pres/redux/img/redux-logo-landscape.png)

@snapend
@snap[south]

- Een state container

- Gebaseerd op Flux van Facebook

- Implementeerbaar in elke js app/framework

@snapend

Note:

- asd
- asd

---

##               2. Motivatie voor Redux

- Code moet steeds meer bijhouden als status
- Bijhouden van de staat van de applicatie wordt moeilijker
- Steeds meer requirements in front-end delopment
- Mutation en asynchronicity
- Redux maakt state mutaties voorspelbaar

Note:

- Als een model een ander model kan updaten, worden views elkaar ook updaten, het wordt moeilijker om de controle te houden over de when, why en how van de staat van de applicatie
- Voorspelbaar maken door restricties te zetten op hoe en wanneer updates mogelijk zijn

---

##               3. Wanneer gebruik je Redux?

- Data die in de loop der tijd verandert
- Een enkele bron van waarheid
- Het bijhouden van de status in een top-level component is niet langer genoeg

---

##               4. De drie principes

- Single source of truth
- State is read-only
- Changes are made with pure functions

---

##               5. Installatie

`npm install redux`
`npm install @angular-redux/store`

---

##               6. Implementatie

@snap[midpoint span-40]

![Redux implementation diagram](docs/pres/redux/img/redux-diagram.png)

@snapend

---

##

```js

while (true) {
    print("Hello World!");
}

```

- Wanneer is redux nodig?
- Verschillende manieren om redux te implementeren (alleen core, NGRX)
- Project structuur
- Core principle redux
- Manieren om redux te gebruiken