[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
Was ist connect()?
- 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
Welche Daten werde mit Redux als Store üblicherweise gehalten?
- Nur Data das von APIs kommt
- Oder Daten die in mehreren Components Trees benötigt werden
- Alle anderen können in Components bleiben
Was ist die mapStateToProps Function?
-Ein HOC, welcher eine component akzeptiert und eine Componente mit Zugriff auf States und Actions returned.