[S9L3] Middleware, Thunk, Async

Question 1

Was ist Middleware?

Answer 1

• Ein gängiges Tool in Software um Prozesse abzufangen, eine Function aufzurufen und dann den Prozess fortzuführen
• Eine Art mit dem Datenfluss durch eine Prozess zu arbeiten bevor er beendet ist

Question 2

Was ist Redux Middleware?

Answer 2

• Fängt jede Action ab, welche dispatched wird bevor es den Reducer erreicht
• Kann Actions stoppen
• Kann Actions unberührt weiterleiten
• Kann Actions zum Reducer dispatchen oder Actions verändern
• Kann mehrere Actions dispatchen

Question 3

Was ist eine Redux Middleware Library?

Answer 3

yarn add redux-logger

import { applyMiddleware, createStore } from ‘redux’;
import logger from ‘redux-logger’;

const store = createStore(
reducer,
applyMiddleware(otherMiddleware, logger)
);

Question 4

Was ist bei der Reihenfolge von loggenden Middlewares zu beachten?

Answer 4

-SIe müssen dem applyMiddleware als letztes Argument hinzugefügt werden

Question 5

Was ist Redux Thunk?

Answer 5

• Eine Möglichkeit um Async Operation in Redux auszuführen

- Ist ein Middleware Package, um Redux Async zu machen

Question 6

Ist Redux by default synchron?

Answer 6

-Ja, bei API Calls muss die gesamte Applikation warten bis die Antwort zurückkommt.

Question 7

Was ist ein thunk?

Answer 7

• Eine function die von einer anderen function returned wird, also eine Art innerer function
• Thunks werden in Action Creators genutzt um Async Operationen auszuführen

Question 8

Wie benutzt man einen Thunk?

Answer 8

import React from “react”;
import ReactDOM from “react-dom”;
import { createStore, applyMiddleware } form “redux”;
import thunk from “redux-thunk”;

import reducer from “./reducers”;

const store = createStore(reducer, applyMiddleware(thunk));

Question 9

Wie benutzt man einen Async Action creator mit redux thunk?

Answer 9

const asyncOperation = data => dispatch => { 
axios.post("/api/data-call", data)
.then(res => {
dispatch({ type: CALL_SUCCESS, payload: res.data });
})
.catch(err =>  {
dispatch({ type: CALL_FAILURE, payload: err.response });
});
};

Question 10

Welche Regeln gelten für Finite State Machines?

Answer 10

-Können nur in einem Zustand zu einem gegebenen Zeitpunkt sein

Question 11

Was erlauben thunks?

Answer 11

-Inner functions (thunks) aus dem Action Creator zu returnen

Question 12

Wie schreibt man einen Load für einen Fetch?

Answer 12

import Loade from “react-load-spinner”