Was ist der beste Weg, auf den Redox-Speicher außerhalb einer Reaktionskomponente zuzugreifen?

Question

@connect funktioniert gut, wenn ich versuche, auf den Speicher innerhalb einer Reaktionskomponente zuzugreifen. Aber wie sollte ich auf etwas anderes Code zugreifen? Zum Beispiel: Angenommen, ich möchte ein Autorisierungstoken für die Erstellung meiner Axios-Instanz verwenden, die global in meiner App verwendet werden kann. Was wäre der beste Weg, 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 Speicher einen Datenpunkt zuzugreifen, ist hier, was das aussehen würde, wenn ich versuchte, es in einem reagieren Komponente zu holen @connect

mit

// 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() {...} 
} 

Irgendwelche Einblicke oder Workflow-Muster da draußen?

Answer 1

Sie können das Objekt store verwenden, das von der Funktion createStore zurückgegeben wird (die bereits in Ihrem Code in der App-Initialisierung verwendet werden sollte). Dann können Sie dieses Objekt verwenden, um den aktuellen Status mit der Methode store.getState() oder store.subscribe(listener) abzurufen, um Aktualisierungen zu speichern.

können Sie auch sicher dieses Objekt window Eigenschaft zuzugreifen es von jedem Teil der Anwendung, wenn Sie es wirklich wollen (window.store = store)

Mehr Infos here

Answer 2

eine Lösung gefunden. Also importiere ich das Geschäft in meine API und abonniere es dort. Und in dieser Listener-Funktion setze ich die globalen Standardwerte der Axios mit meinem neu geholten Token. Diese

ist, was mein neues api.js wie folgt aussieht:

// tooling modules 
import axios from 'axios' 

// store 
import store from '../store' 
store.subscribe(listener) 

function select(state) { 
    return state.auth.tokens.authentication_token 
} 

function listener() { 
    let token = select(store.getState()) 
    axios.defaults.headers.common['Authorization'] = token; 
} 

// configuration 
const api = axios.create({ 
    baseURL: 'http://localhost:5001/api/v1', 
    headers: { 
    'Content-Type': 'application/json', 
    } 
}) 

export default api 

Vielleicht kann sie weiter verbessert werden, führen zur Zeit es ein wenig unelegant scheint. Was ich später tun könnte, ist, eine Middleware zu meinem Geschäft hinzuzufügen und das Token dann und dort zu setzen.

Answer 3

Exportieren Sie den Speicher von dem Modul, das Sie mit createStore aufgerufen haben. Dann können Sie sicher sein, dass beides erstellt wird und den globalen Fensterbereich nicht verschmutzen wird.

MyStore.js

store = createStore(myReducer); export store;

oder

store = createStore(myReducer); export default store;

MyClient.js

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

oder wenn Sie verwendet Standard

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

Answer 4

wie Middleware scheint, ist der Weg zu gehen.
Siehe the official documentation und this issue auf ihre Repo-

Answer 5

Für Typoskript 2.0 es würde wie folgt aussehen:

MyStore.ts

export namespace Store { 

    export type Login = { isLoggedIn: boolean } 

    export type All = { 
     login: Login 
    } 
} 

import { reducers } from '../Reducers' 
import * as Redux from 'redux' 

const reduxStore: Redux.Store<Store.All> = Redux.createStore(reducers) 

export default reduxStore; 

MyClient.tsx

import reduxStore from "../Store"; 
{reduxStore.dispatch(...)}