2016-05-14 1 views
7

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).Memorizzazione di oggetto "globale" al di fuori del negozio Redux nell'app React/Redux

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?

risposta

12

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

9

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

Problemi correlati