@connect
funktioniert hervorragend, wenn ich versuche, innerhalb einer Reaktionskomponente auf den Speicher zuzugreifen. Aber wie soll ich in einem anderen Code darauf zugreifen? Zum Beispiel: Angenommen, ich möchte ein Autorisierungstoken zum Erstellen meiner Axios-Instanz verwenden, das global in meiner App verwendet werden kann. Was wäre der beste Weg, um dies zu erreichen?
Das ist mein api.js
// tooling modules
import axios from 'axios'
// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'
export default api
Jetzt möchte ich von meinem Geschäft aus auf einen Datenpunkt zugreifen. So würde das aussehen, wenn ich versuchen würde, ihn innerhalb einer Reaktionskomponente mit abzurufen @connect
// connect to store
@connect((store) => {
return {
auth: store.auth
}
})
export default class App extends Component {
componentWillMount() {
// this is how I would get it in my react component
console.log(this.props.auth.tokens.authorization_token)
}
render() {...}
}
Gibt es da draußen Einblicke oder Workflow-Muster?
reactjs
redux
react-redux
Subodh Pareek
quelle
quelle
api
In-App
Klasse importieren und nach Erhalt des Autorisierungstokens können Sie dies tunapi.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
. Gleichzeitig können Sie es auch in localStorage speichern. Wenn der Benutzer die Seite aktualisiert, können Sie überprüfen, ob das Token in localStorage vorhanden ist und ob es vorhanden ist Wenn Sie dies tun, können Sie es einstellen. Ich denke, es ist am besten, das Token auf dem API-Modul festzulegen, sobald Sie es erhalten.Antworten:
Exportieren Sie den Store aus dem Modul,
createStore
mit dem Sie angerufen haben . Dann können Sie sicher sein, dass beide erstellt werden und den globalen Fensterbereich nicht verschmutzen.MyStore.js
oder
MyClient.js
oder wenn Sie Standard verwendet haben
Für Anwendungsfälle mit mehreren Filialen
Wenn Sie mehrere Instanzen eines Geschäfts benötigen, exportieren Sie eine Factory-Funktion. Ich würde empfehlen, es zu machen
async
(Rückgabe apromise
).Auf dem Client (in einem
async
Block)quelle
store.getState()
Eine Lösung gefunden. Also importiere ich den Store in mein API Util und abonniere ihn dort. Und in dieser Listener-Funktion habe ich die globalen Standardeinstellungen der Axios mit meinem neu abgerufenen Token festgelegt.
So
api.js
sieht mein neues aus:Vielleicht kann es weiter verbessert werden, weil es derzeit etwas unelegant erscheint. Was ich später tun könnte, ist, meinem Shop eine Middleware hinzuzufügen und das Token dann und dort festzulegen.
quelle
store.js
Datei aussieht?Sie können ein
store
Objekt verwenden, das von dercreateStore
Funktion zurückgegeben wird (das bereits in Ihrem Code bei der App-Initialisierung verwendet werden sollte). Dann können Sie dieses Objekt verwenden, um den aktuellen Status mit derstore.getState()
Methode abzurufen oderstore.subscribe(listener)
um Speicheraktualisierungen zu abonnieren.Sie können dieses Objekt sogar in einer
window
Eigenschaft speichern, um von einem beliebigen Teil der Anwendung aus darauf zuzugreifen, wenn Sie es wirklich möchten (window.store = store
)Weitere Informationen finden Sie in der Redux-Dokumentation .
quelle
store
umwindow
Scheint
Middleware
der richtige Weg zu sein.Lesen Sie die offizielle Dokumentation und dieses Problem in ihrem Repo
quelle
Wie bei @sanchit ist die vorgeschlagene Middleware eine gute Lösung, wenn Sie Ihre Axios-Instanz bereits global definieren.
Sie können eine Middleware erstellen wie:
Und benutze es so:
Das Token wird für jede Aktion festgelegt, Sie können jedoch nur auf Aktionen warten, die beispielsweise das Token ändern.
quelle
Für TypeScript 2.0 würde es so aussehen:
MyStore.ts
MyClient.tsx
quelle
Es mag etwas spät sein, aber ich denke, der beste Weg ist,
axios.interceptors
wie unten zu verwenden. Die Import-URLs können sich je nach Projekt-Setup ändern.index.js
setupAxios.js
quelle
Mach es mit Haken. Ich hatte ein ähnliches Problem, aber ich habe React-Redux mit Hooks verwendet. Ich wollte meinen Schnittstellencode (dh Reaktionskomponenten) nicht mit viel Code versehen, der zum Abrufen / Senden von Informationen aus / zum Geschäft bestimmt ist. Vielmehr wollte ich Funktionen mit generischen Namen, um die Daten abzurufen und zu aktualisieren. Mein Weg war es, die App zu setzen
in ein Modul mit dem Namen
store.js
und Hinzufügenexport
vorconst
und Hinzufügen der üblichen React-Redux-Importe in der store.js. Datei. Dann habe ichindex.js
auf App-Ebene importiert, die ich dann mit den üblichen untergeordnetenimport {store} from "./store.js"
Komponenten in index.js importiert habe. Die untergeordneten Komponenten haben dann mit den HooksuseSelector()
und auf den Store zugegriffenuseDispatch()
.Um auf den Store im Nicht-Komponenten-Front-End-Code zuzugreifen, habe ich den analogen Import (dh
import {store} from "../../store.js"
) verwendet und dann das Abrufen und Aktualisieren (äh, Senden von Aktionen an den Store ) verwendetstore.getState()
undstore.dispatch({*action goes here*})
behandelt.quelle
Eine einfache Möglichkeit, auf das Token zuzugreifen, besteht darin, das Token mit React Native in den LocalStorage oder den AsyncStorage zu legen.
Unten ein Beispiel mit einem React Native- Projekt
authReducer.js
und
api.js
Für das Web können Sie
Window.localStorage
anstelle von AsyncStorage verwendenquelle