Wie teilt man die Logik zwischen Redux Reducern und Action Creators auf?

Question

Ich habe eine Logik, die ich in den Reducer gesetzt habe, von dem ich denke, dass er möglicherweise in die Action gesteckt und weitergegeben werden sollte?

Ist es die beste Vorgehensweise, diese Art von Material in die Aktionen oder den Reducer zu legen?

Arbeitsbeispiel here.

Reducer Code:

function Card() { 
    this.card = (Math.random()*4).toFixed(0); 
} 

Card.prototype = { 
    getRandom: function(){ 
    var card; 
    //console.log(this.card) 
    switch (this.card) { 
     case '1': 
     card = 'heart'; 
     break; 
     case '2': 
     //card = 'diamonds'; 
     card = 'heart'; // weight the odds abit 
     break; 
     case '3': 
     card = 'club'; 
     break; 
     case '4': 
     card = 'spade'; 
     break; 
     default: 
     card = 'heart'; 
     break; 
    } 
    return card; 
    } 
} 

var dealer = { 
    deal: function(){ 
    var results = []; 
    for(var i = 0; i <4; i++){ 
     var card = new Card(); 
     results.push(card.getRandom()); 
    } 
    console.log(results); 
    return results; 
    } 
} 


const initialState = { 
    count: 0, 
    data: [] 
} 

function counter (state = initialState, action) { 
    let count = state.count 
    switch (action.type) { 
    case 'increase': 
     return Object.assign({}, state, { 
     data: dealer.deal(), 
     count: state.count+1 
     }) 
    default: 
     return state 
    } 
} 

Answer 1

Ihr Reduzierstück muss rein sein. Derzeit ist es nicht rein. Es ruft deal(), die getRandom() ruft, die auf Math.random() beruht und somit nicht rein ist.

Diese Art von Logik ("Generieren von Daten", ob randomisiert oder von Benutzereingaben) sollte im Aktionsersteller sein. Action-Ersteller müssen nicht rein sein und können Math.random() sicher verwenden. Diese Aktion Schöpfer würde eine Aktion zurückkehren, ein Objekt beschreibt die Änderung: (oder ersetzen)

{ 
    type: 'DEAL_CARDS', 
    cards: ['heart', 'club', 'heart', 'heart'] 
} 

Das Reduktionsmittel würde nur hinzufügen, diese Daten innerhalb des Staates.

Im Allgemeinen beginnt mit einem Aktionsobjekt. Die Änderung sollte so beschrieben werden, dass der Reduzierer mit dem gleichen Aktionsobjekt und dem gleichen vorherigen Zustand denselben nächsten Zustand zurückgibt. Deshalb kann der Reduzierer keine Math.random() Aufrufe enthalten - sie würden diesen Zustand brechen, da sie jedes Mal zufällig sind. Sie könnten Ihren Reducer nicht testen.

Nachdem Sie herausgefunden haben, wie das Aktionsobjekt aussieht (z. B. wie oben), können Sie den Aktionsersteller schreiben, um es zu generieren, und einen Reduzierer, um Status und Aktion in den nächsten Zustand zu transformieren. Die Logik zum Generieren einer Aktion befindet sich im Aktionsersteller, die Logik, die darauf reagiert, befindet sich im Reduzierer, der Reduzierer muss rein sein.

Schließlich keine Klassen im Zustand verwenden. Sie sind nicht serialisierbar wie sie sind. Sie benötigen keine Card Klasse. Verwenden Sie nur einfache Objekte und Arrays.

Answer 2

Mein Verständnis ist, dass die Maßnahmen einfache Objekte sein sollte, die zwei Dinge enthalten: (i) der Aktionstyp und (ii), was sich geändert (das heißt, die neuen Daten).

Reduzierer auf der anderen Seite sind reine Funktionen, die Aktionen und den vorherigen App-Status als Eingaben übernehmen und den neuen App-Status zurückgeben. Wie sie das erreichen, liegt an dir. Sie können die Logik hinzufügen, die erforderlich ist, um die Kombination aus vorherigem Zustand + Aktion zu verwenden, und den neuen Status zurückgeben, solange Sie keine Daten außerhalb Ihrer Reduzierungsfunktion (en) mutieren.

Wie für Ihren Code speziell, bin ich nicht sicher, ob die deal() Funktion entweder in einer Aktion oder einem Reducer gehört. Ich denke, ein besserer Ort könnte in einer Art Event-Handler sein (z.B. onClick). Sie könnten dann die Ergebnisse des Deal Call als eine Aktion an Ihren Reducer übergeben.

Answer 3

Es scheint dann eine Best Practice zu sein, eine statische Klasse zu haben, die die Entery-Punkte der ersten Ebene behandelt, die die Redux-Aktionen außerhalb des Redux instanziiert.

Ich denke, dass es sinnvoll ist, die Speicher- und Aktionsketten rein zu halten.

Dies könnte zunächst wie viel replizierter Code aussehen, aber wenn Sie beginnen, basierend auf Bedingungen zu versenden oder von mehreren Orten aus zu versenden, beginnt es sich zu öffnen und macht Sinn.