[S9L1] Redux, Actions, Reduce Flashcards
In welche Richtung fließen alle Daten in einer Redux App?
- Nur in eine Richtung durch die Applikation
- Im Kreislauf
Was ist Redux?
- Eine vorraussagbare State Mangement Library
- Mehr eine Architektur für DataFlow als Library
Wie fließen die Daten in einer Redux Applikation?
- 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
Was sind die 3 großen Prinzipien von Redux?
- 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
Wie erstellt man einen Store in Redux?
import { createStore } from ‘redux’;
const store = createStore();
Wie erstellt man einen Mock Reducer?
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
Wie wrapped man die App in einen Provider?
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"));
Wie verbindet man eine Component zu einem Redux Store?
- 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);
Was ist mapStateToProps?
- 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);
Was sind Actions in Redux?
- Sind Pakete von Informationen die ein UI Event beschreiben
- Sind Objekte
- Werden Reducern übergeben und sagen diesen wie der State Tree upgedated werden soll
Was ist ein Action creator?
- 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
}
};
Warum gibt es Action Types?
-Um Bugs durch Missspelling zu verhindern
Was ist das Action Object und wo ist es?
-Das Object innerhalb der Action Creator Function
Wie benutzt man Action Creators in Components?
- 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);
};
Was sind Reducers?
- 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
Wie nutzt man Reducer?
- 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;
}
};
Was ist das Grundprinzip warum Redux verwendet wird?
- Zum auslagern von States in einen gemeinsamen Redux Store.
- Nur noch Reducer können Redux Stores updaten
Warum ist Redux predictable?
-Weil der Data Flow hervorsagbar ist und die States im Redux Store nur durch den Reducer verändert werden können
Wie ist der Redux Ablauf?
- 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.
Wie kann man Reducer erklären?
- Sind Functions, welches zwei Objecte annhemen (currentState, action) und ein einzelnes Object zurücklieferen.
- Das Returned Object ist ein einzelnes State Object
Wie reduziert ein Reducer zwei Objecte zu einem state?
-Durch einen Switch
-Im Grund durch eine Reihe von else if statements
-
Was ist ein Switch Statement?
-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
};
Was ist ein einfaches Beispiel für einen Reducer?
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);
Wieso rerendern die Components bei neuen Redux Store States?
- Weil die Components nach dem connecten ein neues Props bekommen
- Components rerendern immer bei neuen this.state oder bei neuen Props
