Ya no tienes que buscar más por todo internet porque llegaste al espacio justo, contamos con la respuesta que buscas pero sin problema.
Solución:
Más allá de reaccionar
Es posible que no sepa que un la importación ya es global. Si exporta un objeto (singleton), entonces es accesible globalmente como una declaración de importación y también se puede modificar globalmente.
Si desea inicializar algo globalmente pero asegurarse de que solo se modifique una vez, puede usar esto enfoque único que inicialmente tiene propiedades modificables pero luego puedes usar Object.freeze después de su primer uso para asegurar su inmutable en su escenario de inicio.
const myInitObject =
export default myInitObject
luego en su método init haciendo referencia a él:
import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)
los myInitObject seguirá siendo global, ya que se puede hacer referencia en cualquier lugar como una importación pero permanecerá congelado y tirado si alguien intenta modificarlo.
Mi truco de ejemplo de usar el estado global usando un singleton
Si usa reaccionar-crear-aplicación
(lo que estaba buscando en realidad) En este escenario, también puede inicializar objetos globales de forma limpia al hacer referencia a variables de entorno.
Creando un .env archivo en la raíz de su proyecto con prefijo REACT_APP_ las variables internas lo hacen bastante bien. Puede hacer referencia dentro de su JS y JSX process.env.REACT_APP_SOME_VAR según lo necesite Y es inmutable por diseño.
Esto evita tener que configurar window.myVar = %REACT_APP_MY_VAR% en HTML.
Vea más detalles útiles sobre esto desde Facebook directamente:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
¿Por qué no intentas usar Context?
Puede declarar una variable de contexto global en cualquiera de los componentes principales y se podrá acceder a esta variable en el árbol de componentes mediante this.context.varname. Solo tienes que especificar childContextTypes y getChildContext en el componente principal y, a partir de entonces, puede usar/modificar esto desde cualquier componente simplemente especificando contextTypes en el componente hijo.
Sin embargo, tome nota de esto como se menciona en los documentos:
Así como es mejor evitar las variables globales al escribir un código claro, debe evitar usar el contexto en la mayoría de los casos. En particular, piénselo dos veces antes de usarlo para “ahorrar tipeo” y usarlo en lugar de pasar accesorios explícitos.
No se recomienda, pero… puede usar el componenteWillMount de su clase de aplicación para agregar sus variables globales a través de él… un poco así:
componentWillMount: function ()
window.MyVars =
ajax: require('../helpers/ajax.jsx'),
utils: require('../helpers/utils.jsx')
;
Todavía considera esto un truco … pero hará su trabajo
Por cierto, el componente WillMount se ejecuta una vez antes de renderizar, vea más aquí: https://reactjs.org/docs/react-component.html#mounting-componentwillmount