Memorizzazione di oggetto "globale" al di fuori del negozio Redux nell'app React/Redux

Question

Sto costruendo un'app React/Redux che necessita di un oggetto globalmente disponibile (un'istanza lib websocket). Inizialmente ho provato a memorizzarlo nella struttura dello stato di Redux, tuttavia, l'istanza non è immutabile e ha causato molti problemi con il ricaricamento a caldo durante lo sviluppo (tonnellate di errori di riferimento circolari che non esistono quando si esegue da un codice compilato).

La mia domanda è come memorizzare/creare questa istanza in modo che sia disponibile per il mio codice Redux e componenti React? Potrei crearlo in cima all'albero dei componenti e passarlo nell'albero come sostegno, ma è molto "sporco" dopo aver fatto tutto con il collegamento react-redux.

C'è un modo migliore per farlo?

Answer 1

Redux Thunk, scritto da gaeron, lui che ha scritto redux, dal momento 2.1.0 permette di fare:

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

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

Questo è direttamente dai documenti, vedi il link qui sotto per ulteriori informazioni:

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

Answer 2

@ risposta sheeldotme funzionerà bene se stai usando thunk.

Ricorda inoltre che, a seconda della lib websocket che stai utilizzando, potresti non aver bisogno dell'istanza come variabile globale. Ad esempio, con io(url) la chiamata iniziale che effettua la connessione websocket, qualsiasi chiamata successiva a io(url) (con lo stesso argomento url) restituirà la stessa connessione (ad esempio socket oggetto) dalla memoria, senza dover riconnettersi. Rende facile avere un'API che puoi semplicemente import/require, piuttosto che dover passare l'istanza in giro o renderla globale. Vedi lo socket.io docs per maggiori informazioni.

Ad esempio:

socket.js

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

Ora si può semplicemente import/require tuoi socket.js di file per avere un facile accesso allo stesso oggetto presa da qualsiasi luogo.