@connectdziała świetnie, gdy próbuję uzyskać dostęp do sklepu w komponencie reagowania. Ale jak powinienem uzyskać do niego dostęp w innym kodzie kodu. Na przykład: powiedzmy, że chcę użyć tokena autoryzacyjnego do utworzenia mojej instancji axios, która może być używana globalnie w mojej aplikacji, jaki byłby najlepszy sposób na osiągnięcie tego?

To jest mój 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

Teraz chcę uzyskać dostęp do punktu danych z mojego sklepu, oto jak by to wyglądało, gdybym próbował pobrać go w komponencie reagującym za pomocą @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() {...}
}

Jakieś spostrzeżenia lub wzorce przepływu pracy?

Wyeksportuj sklep z modułu, z którym zadzwoniłeś createStore. Wtedy masz pewność, że zostanie on utworzony i nie będzie zanieczyszczał globalnej przestrzeni okien.

MyStore.js

const store = createStore(myReducer);
export store;

lub

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

MyClient.js

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

lub jeśli użyłeś domyślnego

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

W przypadku użycia w wielu sklepach

Jeśli potrzebujesz wielu instancji sklepu, wyeksportuj funkcję fabryki. Polecam zrobienie tego async(zwrot a promise).

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

Na kliencie (w asyncbloku)

import {getUserStore} from './store'

const joeStore = await getUserStore('joe')

Znalazłem rozwiązanie. Więc importuję sklep w moim interfejsie API i tam subskrybuję. I w tej funkcji detektora ustawiam globalne ustawienia domyślne axios za pomocą mojego nowo pobranego tokena.

Tak api.jswygląda mój nowy :

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

Być może można go jeszcze ulepszyć, ponieważ obecnie wydaje się nieco nieelegancki. Mogę później dodać oprogramowanie pośrednie do mojego sklepu i ustawić token tam i teraz.

Możesz użyć storeobiektu zwróconego z createStorefunkcji (który powinien być już użyty w kodzie podczas inicjalizacji aplikacji). Następnie możesz użyć tego obiektu, aby uzyskać bieżący stan za pomocą store.getState()metody lub store.subscribe(listener)zapisać się, aby przechowywać aktualizacje.

Możesz nawet zapisać ten obiekt we windowwłaściwości, aby uzyskać do niego dostęp z dowolnej części aplikacji, jeśli naprawdę tego chcesz ( window.store = store)

Więcej informacji można znaleźć w dokumentacji Redux .

Wydaje się, że Middlewarejest to najlepsza droga.
Zapoznaj się z oficjalną dokumentacją i tym problemem na ich repozytorium

Podobnie jak @sanchit proponowane oprogramowanie pośrednie jest dobrym rozwiązaniem, jeśli już definiujesz instancję axios na całym świecie.

Możesz utworzyć oprogramowanie pośrednie, takie jak:

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;

I użyj tego w ten sposób:

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

Ustawi token dla każdej akcji, ale możesz nasłuchiwać tylko akcji, które na przykład zmieniają token.

W przypadku TypeScript 2.0 wygląda to tak:

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

Może być trochę za późno, ale myślę, że najlepszym sposobem jest użycie axios.interceptorsjak poniżej. Importowane adresy URL mogą ulec zmianie w zależności od konfiguracji projektu.

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)
    );
}

Robiąc to za pomocą haczyków. Zetknąłem się z podobnym problemem, ale użyłem React-Redux z hakami. Nie chciałem tworzyć kodu interfejsu (tj. Reagować na komponenty) z dużą ilością kodu przeznaczonego do pobierania / wysyłania informacji z / do sklepu. Zamiast tego chciałem, aby funkcje o nazwach ogólnych pobierały i aktualizowały dane. Moją ścieżką było umieszczenie aplikacji

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

do modułu o nazwie store.jsi dodawania exportprzed consti dodawania zwykłych importów React-Redux w store.js. plik. Następnie zaimportowałem do index.jsna poziomie aplikacji, którą następnie zaimportowałem do index.js zwykłymi import {store} from "./store.js"komponentami podrzędnymi, a następnie uzyskałem dostęp do sklepu za pomocąuseSelector()useDispatch() haków i .

Aby uzyskać dostęp do sklepu w niekomponentowym kodzie frontonu, użyłem analogicznego importu (tj. import {store} from "../../store.js"), A następnie użyłem store.getState()i store.dispatch({*action goes here*})obsłużyłem pobieranie i aktualizację (er, wysyłanie akcji do) sklepu.

Prostym sposobem na uzyskanie dostępu do tokena jest umieszczenie go w LocalStorage lub AsyncStorage z React Native.

Poniżej przykład z projektem React Native

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;
  }
};
...

i 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 };

W przypadku sieci można użyć Window.localStoragezamiast AsyncStorage