@connect
dział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?
reactjs
redux
react-redux
Subodh Pareek
źródło
źródło
api
wApp
klasie i po uzyskaniu zezwolenia żeton można zrobićapi.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
, a jednocześnie można przechowywać go w localStorage, tak więc gdy odświeża użytkowników na stronie, można sprawdzić, czy token istnieje w localStorage i jeśli to tak, możesz to ustawić. Myślę, że najlepiej będzie ustawić token na module API, jak tylko go dostaniesz.Odpowiedzi:
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
lub
MyClient.js
lub jeśli użyłeś domyślnego
W przypadku użycia w wielu sklepach
Jeśli potrzebujesz wielu instancji sklepu, wyeksportuj funkcję fabryki. Polecam zrobienie tego
async
(zwrot apromise
).Na kliencie (w
async
bloku)źródło
store.getState()
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.js
wygląda mój nowy :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.
źródło
store.js
pliku?Możesz użyć
store
obiektu zwróconego zcreateStore
funkcji (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 lubstore.subscribe(listener)
zapisać się, aby przechowywać aktualizacje.Możesz nawet zapisać ten obiekt we
window
wł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 .
źródło
store
się dowindow
Wydaje się, że
Middleware
jest to najlepsza droga.Zapoznaj się z oficjalną dokumentacją i tym problemem na ich repozytorium
źródło
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:
I użyj tego w ten sposób:
Ustawi token dla każdej akcji, ale możesz nasłuchiwać tylko akcji, które na przykład zmieniają token.
źródło
W przypadku TypeScript 2.0 wygląda to tak:
MyStore.ts
MyClient.tsx
źródło
Może być trochę za późno, ale myślę, że najlepszym sposobem jest użycie
axios.interceptors
jak poniżej. Importowane adresy URL mogą ulec zmianie w zależności od konfiguracji projektu.index.js
setupAxios.js
źródło
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
do modułu o nazwie
store.js
i dodawaniaexport
przedconst
i dodawania zwykłych importów React-Redux w store.js. plik. Następnie zaimportowałem doindex.js
na poziomie aplikacji, którą następnie zaimportowałem do index.js zwykłymiimport {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łemstore.getState()
istore.dispatch({*action goes here*})
obsłużyłem pobieranie i aktualizację (er, wysyłanie akcji do) sklepu.źródło
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
i
api.js
W przypadku sieci można użyć
Window.localStorage
zamiast AsyncStorageźródło