[S9L1] Redux, Actions, Reduce

Question 1

In welche Richtung fließen alle Daten in einer Redux App?

Answer 1

• Nur in eine Richtung durch die Applikation

- Im Kreislauf

Question 2

Was ist Redux?

Answer 2

• Eine vorraussagbare State Mangement Library

- Mehr eine Architektur für DataFlow als Library

Question 3

Wie fließen die Daten in einer Redux Applikation?

Answer 3

• StateTree hält die Daten der Applikation
• Der StateTree gibt die Daten in den View(UI), Daten werden hier via Props an andere Components heruntergereicht
• Wenn ein Event auftritt wird die Action Suite genutzt (Action Type, Action Creator, Action)
• Der Reducer erhält die Action und erstellt einen neuen State Tree und der Kreislauf beginnt erneut

Question 4

Was sind die 3 großen Prinzipien von Redux?

Answer 4

• Der State/Data der App ist in einem einzelnen State Object gespeichert
• Der State is Read-Only(Immutable), man kann States nur über die Erstellung eines Action Objects verändern, welche sagen was aufgetreten ist
• Veränderungen werden nur mit puren Funktionen gemacht, welche den vorherigen State und die Action akzeptieren und einen neuen State herausgeben

Question 5

Wie erstellt man einen Store in Redux?

Answer 5

import { createStore } from ‘redux’;

const store = createStore();

Question 6

Wie erstellt man einen Mock Reducer?

Answer 6

import { createStore } from ‘redux’;

const store = createStore(reducer);

//Der Reducer ist eine Funktion die ein Object returned
//Das returnte Object wird den State Tree repräsentieren

Question 7

Wie wrapped man die App in einen Provider?

Answer 7

import { createStore } from ‘redux’;
import { Provider } from ‘react-redix’:

function reducer() {
return {
title: "Hello world! Iam in the Redux Store"
};
}
const store = createStore(reducer);

ReactDOM .render(
Provider store={store}/>
App />
/Provider>,
document.getElementbyId("root"));

Question 8

Wie verbindet man eine Component zu einem Redux Store?

Answer 8

• Mit der connect() function
• Durch das Exportierten durch das Callen der connect Function

import { connect } from “rect-redux”;

const MovieList = props => {
…
];

export default connect(null, {})(MovieList);

Question 9

Was ist mapStateToProps?

Answer 9

• Nimmt Objekte aus dem State Tree und mappes sie zu den Props
• Sagt connect welchen Teil der Daten an die Components gepassed werden sollen
• Nimmt state als ein Argument

-Ist dafür da um Teile des State Trees zu den Props der Component zu mappen

const mapStateToProps = state => {
return {
movies: state.movies,
user: strate.user
};
};
export default connect(mapStateToProps, {})MovieList);

Question 10

Was sind Actions in Redux?

Answer 10

• Sind Pakete von Informationen die ein UI Event beschreiben
• Sind Objekte
• Werden Reducern übergeben und sagen diesen wie der State Tree upgedated werden soll

Question 11

Was ist ein Action creator?

Answer 11

• Eine Function die eine Action erstellt, indem sie ein Action Object returned
• Action Type wird genutzt um Bugs zu verhindern und Type der Action zu sein
• Wenn die Action Creator Function gecalled wird wird der Reducer unter der Haube von Redux selbst darüber informiert

export const ADD_MOVIE = “ADD_MOVIE”;

export const addMovie = () => movieTitle => {
return {
type: ADD_MOVIE,
payload: payload
}
};

Question 12

Warum gibt es Action Types?

Answer 12

-Um Bugs durch Missspelling zu verhindern

Question 13

Was ist das Action Object und wo ist es?

Answer 13

-Das Object innerhalb der Action Creator Function

Question 14

Wie benutzt man Action Creators in Components?

Answer 14

• Importieren von Action Creator Function
• Zu Props hinzufügen
• Function invoken und den state hinzufügen

import { addMovie } from “../actions”;

addMovie = e => {
e.preventDefault();
this-props.addMovie(this. state.newMovie);
};

Question 15

Was sind Reducers?

Answer 15

• Pure Functions
• Akzeptieren als Argumente den state tree und eine Action
• Nutzen switch case um den Action Type zu checken und erstellen einen updateten State Tree basierend auf dem Action Type und der Action Payload
• Jeder Case des Switch Statements gibt einen neuen, geupdateten State Tree zurück,.welcher das UI mit neuen Daten rerendert

Question 16

Wie nutzt man Reducer?

Answer 16

• Eine Reducer Function erstellen und den state mit default Value des initialState und der dispatched Action
• Das Switch Statement und den check für Action Type hinzufügen
• Den Case für jeden Action Type machen
• Immutable Prinzipien, Update und return des State Trees
• Return state als default unberührt

import { ADD_MOVIE } from “../actions/index”;

const initialState ={
...
};

export default (state = initialState, action) => {
console.log(action);
switch (action.type) {
case ADD_MOVIE:
return {
...state,
movies: [...state.movies, action.payload]
};
default: 
return state;
}
};

Question 17

Was ist das Grundprinzip warum Redux verwendet wird?

Answer 17

• Zum auslagern von States in einen gemeinsamen Redux Store.

- Nur noch Reducer können Redux Stores updaten

Question 18

Warum ist Redux predictable?

Answer 18

-Weil der Data Flow hervorsagbar ist und die States im Redux Store nur durch den Reducer verändert werden können

Question 19

Wie ist der Redux Ablauf?

Answer 19

• States werden im Redux Store gehalten
• Components connected
• Components melden Actions an Action Creator Functions
• Action Creator Functions melden an Reducer
• Reducer verändert den State des Redux Store
• Neue State Trees werden an Components geliefert und UI Views neugerendert.

Question 20

Wie kann man Reducer erklären?

Answer 20

• Sind Functions, welches zwei Objecte annhemen (currentState, action) und ein einzelnes Object zurücklieferen.
• Das Returned Object ist ein einzelnes State Object

Question 21

Wie reduziert ein Reducer zwei Objecte zu einem state?

Answer 21

-Durch einen Switch
-Im Grund durch eine Reihe von else if statements
-

Question 22

Was ist ein Switch Statement?

Answer 22

-Eine Alternative zu If Else
-
switch (action.tyoe) {
case "UPDATE_TITLE":
return stateOne;
case "DELETE_SMURFS":
return stateTwo
} default: 
return currentState
}

if (action.type === "UPDATE_TITLE" {
return stateOne
} else if (action.type === "DELETE_SMURFS") {
return stateTwo
} else { 
return currentState
};

Question 23

Was ist ein einfaches Beispiel für einen Reducer?

Answer 23

const initialState = {
name: "dustin",
faveFood: "Pizza",
vehicles: [
{ model: "Tacoma", make: "Toyota" },
{ model: "Traverse", make: "Chevy" }
],
}

const action = { type: “CHANGE_FOOD”, payload: “Pasta”};

const addVehicleAction = {

type: “ADD_VEHICLE”,
payload: { model: “Model 3”, make: “Tesla” }

const reducer = (state, action) => {
switch(action.type) {
case: "CHANGE_FOOD":
return {
...state,
 faveFood: action.payload
}
case: "ADD_VEHICLE":
return {
...state,
 vehicles: [..state.vehicles, action.payload]
}
default: 
return: state;
}
}

const newState= reducer(initialState, action);
console.log(newState);

const newerState = reducer(newState, addVehicleAction);

console.log(newerState);

Question 24

Wieso rerendern die Components bei neuen Redux Store States?

Answer 24

• Weil die Components nach dem connecten ein neues Props bekommen
• Components rerendern immer bei neuen this.state oder bei neuen Props

Question 25

Was ist connect()?

Answer 25

• Eine Higher Order Component (HOC), welches einer Component neue Funktionalitäten verleiht.
• Es nimmt alle properties aus mapStateToProps und fügt diesen der Component als Props hinzu

Question 26

Welche Daten werde mit Redux als Store üblicherweise gehalten?

Answer 26

• Nur Data das von APIs kommt
• Oder Daten die in mehreren Components Trees benötigt werden
• Alle anderen können in Components bleiben

Question 27

Was ist die mapStateToProps Function?

Answer 27

-Ein HOC, welcher eine component akzeptiert und eine Componente mit Zugriff auf States und Actions returned.