@connect
fonctionne très bien lorsque j'essaie d'accéder au magasin dans un composant de réaction. Mais comment dois-je y accéder dans un autre morceau de code. Par exemple: disons que je souhaite utiliser un jeton d'autorisation pour créer mon instance axios qui peut être utilisée globalement dans mon application, quel serait le meilleur moyen d'y parvenir?
C'est mon 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
Maintenant, je veux accéder à un point de données de mon magasin, voici à quoi cela ressemblerait si j'essayais de le récupérer dans un composant de réaction en utilisant @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() {...}
}
Avez-vous des idées ou des modèles de flux de travail?
reactjs
redux
react-redux
Subodh Pareek
la source
la source
api
dans laApp
classe et après avoir obtenu le jeton d'autorisation, vous pouvez le faireapi.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
, Et en même temps, vous pouvez le stocker dans localStorage également, donc lorsque l'utilisateur actualise la page, vous pouvez vérifier si le jeton existe dans localStorage et s'il fait, vous pouvez le définir., Je pense qu'il sera préférable de définir le jeton sur le module api dès que vous l'obtiendrez.Réponses:
Exportez le magasin depuis le module
createStore
avec lequel vous avez appelé . Ensuite, vous êtes assuré qu'il sera à la fois créé et ne polluera pas l'espace de la fenêtre globale.MyStore.js
ou
MyClient.js
ou si vous avez utilisé par défaut
Pour les cas d'utilisation de plusieurs magasins
Si vous avez besoin de plusieurs instances d'un magasin, exportez une fonction d'usine. Je recommanderais de le faire
async
(retourner unpromise
).Sur le client (dans un
async
bloc)la source
store.getState()
J'ai trouvé une solution. J'importe donc le magasin dans mon utilitaire api et je m'y abonne. Et dans cette fonction d'écoute, j'ai défini les valeurs par défaut globales de l'axios avec mon jeton récemment récupéré.
Voici à quoi
api.js
ressemble mon nouveau :Peut-être que cela peut être encore amélioré, car actuellement cela semble un peu inélégant. Ce que je pourrais faire plus tard, c'est ajouter un middleware à mon magasin et définir le jeton sur-le-champ.
la source
store.js
fichier?Vous pouvez utiliser un
store
objet renvoyé par lacreateStore
fonction (qui devrait déjà être utilisé dans votre code lors de l'initialisation de l'application). Ensuite, vous pouvez utiliser cet objet pour obtenir l'état actuel avec lastore.getState()
méthode oustore.subscribe(listener)
pour vous abonner pour stocker les mises à jour.Vous pouvez même enregistrer cet objet dans la
window
propriété pour y accéder depuis n'importe quelle partie de l'application si vous le souhaitez vraiment (window.store = store
)Plus d'informations peuvent être trouvées dans la documentation Redux .
la source
store
sur lewindow
On dirait que
Middleware
c'est la voie à suivre.Reportez - vous la documentation officielle et ce problème sur leur repo
la source
Comme @sanchit, le middleware proposé est une bonne solution si vous définissez déjà votre instance axios globalement.
Vous pouvez créer un middleware comme:
Et utilisez-le comme ceci:
Il définira le jeton à chaque action, mais vous ne pourrez écouter que les actions qui modifient le jeton par exemple.
la source
Pour TypeScript 2.0, cela ressemblerait à ceci:
MyStore.ts
MyClient.tsx
la source
Il est peut-être un peu tard mais je pense que le meilleur moyen est d'utiliser
axios.interceptors
comme ci-dessous. Les URL d'importation peuvent changer en fonction de la configuration de votre projet.index.js
setupAxios.js
la source
Le faire avec des crochets. J'ai rencontré un problème similaire, mais j'utilisais react-redux avec des hooks. Je ne voulais pas larder mon code d'interface (c'est-à-dire les composants de réaction) avec beaucoup de code dédié à la récupération / l'envoi d'informations depuis / vers le magasin. Je voulais plutôt des fonctions avec des noms génériques pour récupérer et mettre à jour les données. Mon chemin était de mettre l'appli
dans un module nommé
store.js
et en ajoutantexport
avantconst
et en ajoutant les importations react-redux habituelles dans le store.js. fichier. Ensuite, j'ai importé auindex.js
niveau de l'application, que j'ai ensuite importé dans index.js avec lesimport {store} from "./store.js"
composants enfants habituels , puis ont accédé au magasin à l'aide des crochetsuseSelector()
etuseDispatch()
.Pour accéder au magasin en code frontal non-composant, j'ai utilisé l'importation analogue (c'est-à-dire
import {store} from "../../store.js"
), puis j'ai utiliséstore.getState()
etstore.dispatch({*action goes here*})
géré la récupération et la mise à jour (euh, l'envoi d'actions) au magasin.la source
Un moyen simple d'accéder au jeton consiste à placer le jeton dans LocalStorage ou AsyncStorage avec React Native.
Ci-dessous un exemple avec un projet React Native
authReducer.js
et
api.js
Pour le Web, vous pouvez utiliser à la
Window.localStorage
place d'AsyncStoragela source