diff --git a/reflex/.templates/jinja/web/utils/context.js.jinja2 b/reflex/.templates/jinja/web/utils/context.js.jinja2 index 2428cfa9d..b2c64cfd0 100644 --- a/reflex/.templates/jinja/web/utils/context.js.jinja2 +++ b/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}}" diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js index da0934da5..d73f020d5 100644 --- a/reflex/.templates/web/utils/state.js +++ b/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 }); } diff --git a/reflex/compiler/templates.py b/reflex/compiler/templates.py index debb20a3d..886e4c1c9 100644 --- a/reflex/compiler/templates.py +++ b/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(),