pass constants via js consts to state.js

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -23,6 +23,8 @@ export const clientStorage = {{ client_storage|json_dumps }}
 export const clientStorage = {}
 {% endif %}
 
+export const main_state_name = "{{const.main_state_name}}"
+export const update_vars_internal = "{{const.update_vars_internal}}"
 {% if state_name %}
 export const state_name = "{{state_name}}"
 

reflex/.templates/web/utils/state.js

@@ -12,6 +12,8 @@ import {
   onLoadInternalEvent,
   state_name,
   exception_state_name,
+  main_state_name,
+  update_vars_internal,
 } from "$/utils/context.js";
 import debounce from "$/utils/helpers/debounce";
 import throttle from "$/utils/helpers/throttle";
@@ -810,7 +812,7 @@ export const useEventLoop = (
         const vars = {};
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
-          `${state_name}.{{ update_vars_internal }}`,
+          `${state_name}.${update_vars_internal}`,
           { vars: vars }
         );
         addEvents([event], e);
@@ -824,7 +826,7 @@ export const useEventLoop = (
   // Route after the initial page hydration.
   useEffect(() => {
     const change_start = () => {
-      const main_state_dispatch = dispatch["state"];
+      const main_state_dispatch = dispatch[main_state_name];
       if (main_state_dispatch !== undefined) {
         main_state_dispatch({ is_hydrated: false });
       }

reflex/compiler/templates.py

@@ -14,6 +14,7 @@ class ReflexJinjaEnvironment(Environment):
         from reflex.state import (
             FrontendEventExceptionState,
             OnLoadInternalState,
+            State,
             UpdateVarsInternalState,
         )
 
@@ -48,6 +49,7 @@ class ReflexJinjaEnvironment(Environment):
             "set_color_mode": constants.ColorMode.SET,
             "use_color_mode": constants.ColorMode.USE,
             "hydrate": constants.CompileVars.HYDRATE,
+            "main_state_name": State.get_name(),
             "on_load_internal": f"{OnLoadInternalState.get_name()}.on_load_internal",
             "update_vars_internal": f"{UpdateVarsInternalState.get_name()}.update_vars_internal",
             "frontend_exception_state": FrontendEventExceptionState.get_full_name(),