Quelle est la meilleure façon d’accéder à une boutique redux en dehors d’un composant de réagir ?

Question

@connect fonctionne très bien lorsque j'essaye d'accéder à la boutique sein de réagir composant. Mais comment dois-je accès à un autre morceau de code. Pour exemple: disons que je veux utiliser un jeton d'autorisation pour la création de mon axios exemple qui peut être utilisé à l'échelle mondiale dans mon application, quelle serait la meilleure façon 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 à partir de mon magasin, voici ce qui pourrait ressembler si j'essayais de le récupérer à l'intérieur d'une réagir composant à l'aide de @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() {...}
}

Des idées ou des modes de travail?

Answer 1

L'exportation de la boutique le module que vous avez appelé createStore avec. Alors vous êtes assuré qu'il va être créé et ne polluera pas la fenêtre globale de l'espace.

MyStore.js

const store = createStore(myReducer);
export store;

ou

const store = createStore(myReducer);
export default store;

MyClient.js

import {store} from './MyStore'
store.dispatch(...)

ou si vous avez utilisé par défaut

import store from './MyStore'
store.dispatch(...)

Pour Plusieurs Magasin De Cas D'Utilisation

Si vous avez besoin de plusieurs instances d'un magasin, d'exporter une fonction de fabrication. Je recommanderais le rendant async (de retour d'un promise).

async function getUserStore (userId) {
   // check if user store exists and return or create it.
}
export getUserStore

Sur le client (en async (bloc

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

Answer 2

Trouvé une solution. Importer le magasin dans mon api util et j’y souscrire il. Et dans cette fonction d’écouteur j’ai mis des valeurs par défaut globales de l’axios avec mon jeton nouvellement récupérations.

C’est ce que mon nouveau `` ressemble à :

Peut-être il peut encore être améliorée, cause actuellement, il semble un peu disgracieux. Ce que je pouvais faire plus tard, c’est ajouter un middleware à mon magasin et là et la valeur du jeton.

Answer 3

Vous pouvez utiliser store objet qui est retourné à partir de createStore de la fonction (ce qui devrait être déjà utilisé dans votre code en application de l'initialisation). Que vous pouvez utiliser cet objet pour obtenir de l'état actuel avec store.getState() méthode ou store.subscribe(listener) pour vous abonner à stocker les mises à jour.

Vous pouvez même enregistrer cet objet d' window de la propriété d'accéder à partir de n'importe quelle partie de l'application si vous voulez vraiment (window.store = store)

Plus d'informations peuvent être trouvées dans le Redux de la documentation .

Answer 4

On dirait `` est le chemin à parcourir.
Reportez-vous à la documentation officielle et cette question sur leur repo

Answer 5

Comme @sanchit middleware proposé est une solution agréable si vous déjà définissez votre instance axios dans le monde.

Vous pouvez créer un middleware comme :

Et l’utiliser comme ceci :

Il définira le jeton sur chaque action, mais vous pourriez écouter uniquement pour les actions qui modifient le jeton par exemple.