Przechowywanie obiektu "globalnego" poza sklepem Redux w aplikacji React/Redux

Question

Buduję aplikację React/Redux, która potrzebuje obiektu dostępnego na całym świecie (instancja websocket lib). Pierwotnie próbowałem przechowywać to w drzewie stanu Redux, jednak instancja nie jest niezmienna i spowodowała wiele problemów z gorącym ponownym ładowaniem podczas rozwoju (mnóstwo okrągłych błędów referencyjnych, które nie istnieją podczas uruchamiania ze skompilowanego kodu).

Moje pytanie brzmi: jak zapisać/utworzyć tę instancję, aby była dostępna dla mojego kodu Redux i komponentów React? Mógłbym stworzyć go na samym szczycie drzewa komponentów i przekazać je drzewu jako rekwizyt, ale to wszystko wydaje się bardzo "brudne" po tym, jak zrobiłem wszystko, łącząc reag-redux.

Czy jest lepszy sposób to zrobić?

Answer 1

Redux Thunk, autorstwa gaeron, kto jest autorem Redux, ponieważ 2.1.0 pozwala zrobić:

const store = createStore(
    reducer, 
    applyMiddleware(thunk.withExtraArgument(api)) 
) 

// later 
function fetchUser(id) { 
    return (dispatch, getState, api) => { 
    // you can use api here 
    } 
} 

Jest to prosto z docs, patrz link poniżej, aby uzyskać więcej informacji:

https://github.com/gaearon/redux-thunk

Answer 2

@ Odpowiedź sheeldotme będzie działać dobrze, jeśli używasz thunks.

Należy również pamiętać, że w zależności od używanej biblioteki internetowej może nie być potrzebna instancja jako zmienna globalna. Na przykład z socket.io-client po pierwszym wywołaniu io(url), które powoduje połączenie WebSocket, każde kolejne wywołanie do io(url) (z tym samym argumentem url) spowoduje zwrócenie tego samego połączenia (tj. Obiektu socket) z pamięci, bez konieczności ponownego połączenia. Ułatwia to posiadanie interfejsu API, który można po prostu łatwo uzyskać, niż przekazywać instancję dookoła lub globalnie. Aby uzyskać więcej informacji, patrz socket.io docs.

Na przykład:

socket.js

import io from 'socket.io-client' 
const socket = io(`${protocol}//${hostname}:${port}`) 
export default socket 

Teraz możesz po prostu import/require twoi socket.js plików, aby mieć łatwy dostęp do tego samego obiektu z dowolnego gniazda.