@connectfunktioniert 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?

Exportieren Sie den Store aus dem Modul, createStoremit dem Sie angerufen haben . Dann können Sie sicher sein, dass beide erstellt werden und den globalen Fensterbereich nicht verschmutzen.

MyStore.js

const store = createStore(myReducer);
export store;

oder

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

MyClient.js

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

oder wenn Sie Standard verwendet haben

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

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 a promise).

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

Auf dem Client (in einem asyncBlock)

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

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.jssieht mein neues aus:

// 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 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.

Sie können ein storeObjekt verwenden, das von der createStoreFunktion 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 der store.getState()Methode abzurufen oder store.subscribe(listener)um Speicheraktualisierungen zu abonnieren.

Sie können dieses Objekt sogar in einer windowEigenschaft 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 .

Scheint Middlewareder richtige Weg zu sein.
Lesen Sie die offizielle Dokumentation und dieses Problem in ihrem Repo

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:

function createAxiosAuthMiddleware() {
  return ({ getState }) => next => (action) => {
    const { token } = getState().authentication;
    global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;

    return next(action);
  };
}

const axiosAuth = createAxiosAuthMiddleware();

export default axiosAuth;

Und benutze es so:

import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(axiosAuth))

Das Token wird für jede Aktion festgelegt, Sie können jedoch nur auf Aktionen warten, die beispielsweise das Token ändern.

Für TypeScript 2.0 würde es so 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(...)}

Es mag etwas spät sein, aber ich denke, der beste Weg ist, axios.interceptorswie unten zu verwenden. Die Import-URLs können sich je nach Projekt-Setup ändern.

index.js

import axios from 'axios';
import setupAxios from './redux/setupAxios';
import store from './redux/store';

// some other codes

setupAxios(axios, store);

setupAxios.js

export default function setupAxios(axios, store) {
    axios.interceptors.request.use(
        (config) => {
            const {
                auth: { tokens: { authorization_token } },
            } = store.getState();

            if (authorization_token) {
                config.headers.Authorization = `Bearer ${authorization_token}`;
            }

            return config;
        },
       (err) => Promise.reject(err)
    );
}

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

const store = createSore(
   allReducers,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

in ein Modul mit dem Namen store.jsund Hinzufügen exportvor constund Hinzufügen der üblichen React-Redux-Importe in der store.js. Datei. Dann habe ich index.jsauf App-Ebene importiert, die ich dann mit den üblichen untergeordneten import {store} from "./store.js"Komponenten in index.js importiert habe. Die untergeordneten Komponenten haben dann mit den Hooks useSelector()und auf den Store zugegriffen useDispatch().

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 ) verwendet store.getState()und store.dispatch({*action goes here*})behandelt.

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

import { AsyncStorage } from 'react-native';
...
const auth = (state = initialState, action) => {
  switch (action.type) {
    case SUCCESS_LOGIN:
      AsyncStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
      };
    case REQUEST_LOGOUT:
      AsyncStorage.removeItem('token');
      return {};
    default:
      return state;
  }
};
...

und api.js

import axios from 'axios';
import { AsyncStorage } from 'react-native';

const defaultHeaders = {
  'Content-Type': 'application/json',
};

const config = {
  ...
};

const request = axios.create(config);

const protectedRequest = options => {
  return AsyncStorage.getItem('token').then(token => {
    if (token) {
      return request({
        headers: {
          ...defaultHeaders,
          Authorization: `Bearer ${token}`,
        },
        ...options,
      });
    }
    return new Error('NO_TOKEN_SET');
  });
};

export { request, protectedRequest };

Für das Web können Sie Window.localStorageanstelle von AsyncStorage verwenden