Creé un juego de mecanografía táctil en React y Node.js y quiero que el componente de función de la página de TypeScript actualice una variable EXP compartida globalmente para que los jugadores puedan navegar por las páginas de la aplicación y mantener su XP ganado. La variable puede restablecerse una vez que cierran la aplicación, solo necesita ser por sesión. Aquí hay un poco del código para XP dentro type.tsx que es un componente de función llamado en las rutas en App.js
Type.tsx
... if (currIndex + 1 === length) { xpM = xpM + 1; bonusCounter = bonusCounter + 1; err = err + errorChar; currXP = xp * correctChar; addXP = (currXP - (err * 2)) * xpM; xpPercent = Math.round((uXP/xpNeed) * 100); (gain as HTMLAudioElement).play(); console.log(xpPercent); if (err > correctChar) { addXP = correctChar * 3; } tXP = tXP + addXP; uXP = tXP; ...Quiero que se pueda acceder a las variables tXP, xpNeed y level desde el componente Seleccionar prueba, así como desde las otras páginas de escritura (hay 6 pruebas diferentes con diferentes matrices de texto para completar el texto de escritura). He leído que Redux podría hacer esto. pero después de investigarlo, parece que necesitaría reconstruir toda la aplicación para usar las herramientas de Redux. ¿Hay una manera rápida y sucia de lograr esto? La aplicación solo se usa como demostración para un juego de Unity más grande que está en desarrollo, por lo que no tiene que ser una solución súper elegante o compleja. ¡Gracias!
Le recomiendo que use React Context para compartir el estado entre sus componentes. Puede crear una variable EXP a la que se pueda acceder desde sus componentes relevantes y compartir actualizaciones.
Si necesita mantener un servidor sincronizado, puede publicar los incrementos de EXP cuando actualice el estado local en el Proveedor de contexto anterior, o use socket.io si necesita comunicaciones en tiempo real y el juego es muy hablador.
Cree una clase para variables globales y sus métodos:
export default class GlobalVariables { static createVariables() { //set here variables you want to be global this.tXP = 0; } static getXP() {//method to get XP return this.tXP; } static addXP(value) {//method to add XP this.tXP += value; } //create others methods you want for your variables }En su componente de inicio, importe la clase y llame a createVariables (llame esto cuando se inicie la aplicación):
import GlobalVariables from './Global' ... GlobalVariables.createVariables() ...En sus otros componentes, importe la clase y use los otros métodos:
import GlobalVariables from './Global' ... GlobalVariables.addXP(5); console.log(GlobalVariables.getXP()) ...