Es gibt unterschiedliche Meinungen darüber, ob der Zugriff auf den Status von Aktionserstellern eine gute Idee ist:
- Der Redux-Ersteller Dan Abramov ist der Ansicht, dass dies eingeschränkt werden sollte: "Die wenigen Anwendungsfälle, in denen ich dies für akzeptabel halte, sind die Überprüfung zwischengespeicherter Daten, bevor Sie eine Anfrage stellen, oder die Überprüfung, ob Sie authentifiziert sind (dh einen bedingten Versand durchführen). Ich denke, dass das Übergeben von Daten wie
state.something.items
in einem Aktionsersteller definitiv ein Anti-Pattern ist und entmutigt wird, weil es den Änderungsverlauf verdeckt: Wenn ein Fehler vorliegt und items
falsch ist, ist es schwierig zu verfolgen, woher diese falschen Werte stammen, weil sie sind bereits Teil der Aktion, anstatt direkt von einem Reduzierer als Reaktion auf eine Aktion berechnet zu werden. Tun Sie dies also mit Vorsicht. "
- Der derzeitige Redux-Betreuer Mark Erikson sagt, dass es in Ordnung ist und sogar dazu ermutigt wird, es
getState
in Thunks zu verwenden - deshalb gibt es es . In seinem Blog-Beitrag Idiomatic Redux: Gedanken zu Thunks, Sagas, Abstraktion und Wiederverwendbarkeit erörtert er die Vor- und Nachteile des Zugriffs auf den Status von Aktionserstellern .
Wenn Sie feststellen, dass Sie dies benötigen, sind beide von Ihnen vorgeschlagenen Ansätze in Ordnung. Der erste Ansatz erfordert keine Middleware:
import store from '../store';
export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
return {
type: SOME_ACTION,
items: store.getState().otherReducer.items,
}
}
Sie können jedoch sehen, dass es sich store
um einen Singleton handelt, der aus einem Modul exportiert wird. Wir empfehlen dies nicht, da es viel schwieriger ist, Ihrer App Server-Rendering hinzuzufügen, da Sie in den meisten Fällen auf dem Server pro Anfrage einen separaten Speicher haben möchten . Obwohl dieser Ansatz technisch funktioniert, empfehlen wir nicht, ein Geschäft aus einem Modul zu exportieren.
Aus diesem Grund empfehlen wir den zweiten Ansatz:
export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
return (dispatch, getState) => {
const {items} = getState().otherReducer;
dispatch(anotherAction(items));
}
}
Es würde erfordern, dass Sie Redux Thunk Middleware verwenden, aber es funktioniert sowohl auf dem Client als auch auf dem Server einwandfrei. Lesen Sie hier mehr über Redux Thunk und warum dies in diesem Fall erforderlich ist .
Im Idealfall sollten Ihre Aktionen nicht „fett“ sein und so wenig Informationen wie möglich enthalten. Sie sollten sich jedoch frei fühlen, das zu tun, was für Sie in Ihrer eigenen Anwendung am besten funktioniert. Die Redux-FAQ enthält Informationen zur Aufteilung der Logik zwischen Aktionserstellern und Reduzierungen sowie zu Zeiten, in denen die Verwendung getState
in einem Aktionsersteller hilfreich sein kann .
getState
als zweiten ParameterWenn Ihr Szenario einfach ist, können Sie verwenden
Aber manchmal
action creator
müssen Sie mehrere Aktionen auslösenZum Beispiel asynchrone Anforderung, damit Sie
REQUEST_LOAD
REQUEST_LOAD_SUCCESS
REQUEST_LOAD_FAIL
Aktionen benötigenHinweis: Sie benötigen Redux-Thunk , um die Funktion im Aktionsersteller zurückzugeben
quelle
loading === true
vorhanden ist, und deaktivieren Sie die Schaltfläche.Ich stimme @Bloomca zu. Das Übergeben des vom Geschäft benötigten Werts an die Versandfunktion als Argument scheint einfacher zu sein als das Exportieren des Geschäfts. Ich habe hier ein Beispiel gemacht:
quelle
Ich möchte darauf hinweisen, dass es nicht so schlecht ist, aus dem Geschäft zu lesen - es ist möglicherweise viel bequemer, zu entscheiden, was basierend auf dem Geschäft getan werden soll, als alles an die Komponente und dann als Parameter von zu übergeben eine Funktion. Ich stimme Dan voll und ganz zu, dass es viel besser ist, store nicht als Singletone zu verwenden, es sei denn, Sie sind zu 100% sicher, dass Sie es nur für clientseitiges Rendern verwenden (andernfalls können schwer nachvollziehbare Fehler auftreten).
Ich habe kürzlich eine Bibliothek erstellt , um die Ausführlichkeit von Redux zu behandeln, und ich denke, es ist eine gute Idee, alles in die Middleware zu integrieren, damit Sie alles als Abhängigkeitsinjektion haben.
Ihr Beispiel sieht also so aus:
Wie Sie sehen, ändern wir die Daten hier jedoch nicht wirklich. Daher besteht eine gute Chance, dass wir diesen Selektor einfach an einer anderen Stelle verwenden können, um sie an einer anderen Stelle zu kombinieren.
quelle
Vorstellung einer alternativen Lösung. Dies kann je nach Anwendung besser oder schlechter sein als die Lösung von Dan.
Sie können den Status von den Reduzierern in die Aktionen übernehmen, indem Sie die Aktion in zwei separate Funktionen aufteilen: erst nach den Daten fragen, zweitens nach den Daten. Sie können dies mit verwenden
redux-loop
.Zuerst 'bitte nach den Daten fragen'
Fangen Sie im Reduzierer die Abfrage ab und stellen Sie die Daten mithilfe von für die Aktion der zweiten Stufe bereit
redux-loop
.Machen Sie mit den vorliegenden Daten, was Sie ursprünglich wollten
Hoffe das hilft jemandem.
quelle
Ich weiß, dass ich zu spät zur Party hier komme, aber ich bin hierher gekommen, um Meinungen über meinen eigenen Wunsch, Staat in Handlungen zu verwenden, zu äußern, und habe mich dann selbst gebildet, als mir klar wurde, was ich für das richtige Verhalten halte.
Hier macht ein Selektor für mich am meisten Sinn. Ihrer Komponente, die diese Anforderung ausgibt, sollte mitgeteilt werden, ob es Zeit ist, sie durch Auswahl auszugeben.
Es mag sich wie undichte Abstraktionen anfühlen, aber Ihre Komponente muss eindeutig eine Nachricht senden und die Nachrichtennutzlast sollte den relevanten Status enthalten. Leider hat Ihre Frage kein konkretes Beispiel, da wir auf diese Weise ein „besseres Modell“ von Selektoren und Aktionen durcharbeiten könnten.
quelle
Ich möchte noch eine andere Alternative vorschlagen, die ich am saubersten finde, aber sie erfordert
react-redux
oder etwas Ähnliches - außerdem verwende ich unterwegs ein paar andere ausgefallene Funktionen:Wenn Sie diese wieder verwenden möchten , müssen Sie die spezifische extrahieren müssen
mapState
,mapDispatch
undmergeProps
in Funktionen an anderer Stelle wieder zu verwenden, aber das macht Abhängigkeiten vollkommen klar.quelle