Estoy haciendo una aplicación con Remix.run. Consiste en múltiples pasos en los que el usuario completa formularios y al final obtiene una pantalla de éxito. Todos los pasos del formulario están ubicados en una sola ruta, pero el éxito está en su propia ruta.
Tengo un procesamiento de mensajes similar a redux (en realidad XState, pero no es importante) en el servidor. Recibe el estado actual (o inicial para la carga inicial), el tipo de mensaje y los datos de los campos. Luego devuelve el nuevo estado al cliente y la página se representa en función de ese estado. El servidor no tiene ningún almacenamiento y no quiero presentar uno, ya que complicará las cosas.
// form page export async function loader() { return json(await getInitialState()) } export async function action({request}) { let fd = await request.formData(); let {current_state, message_type, ...data} = Object.fromEntries(fd.entries()); return json(await getNextState(current_state, {type: message_type, data})); } export function unstable_shouldReload({submission}) { return !submission } export default FormPage() { let loaderData = useLoaderData(); let actionData = useActionData(); // awful, isn't it? let currentState = actionData || loaderData; } Primero, mi problema fue que el cargador se activó en cada envío de formulario. Entonces, ActionFunction devuelve el estado nuevo, pero LoaderFunction devuelve el estado inicial. Estaría bien, pero para obtener el estado inicial, el cargador ejecuta la API, por lo que son llamadas desperdiciadas. Lo resolví con unstable_ShouldReload , y está bien, pero no realmente.
Ahora llegué al paso final del formulario y siento que tengo el mismo problema, pero ahora tengo una ruta separada, por lo que no puedo evitar ejecutar LoaderFunction. Necesito que LoaderFunction se ejecute realmente en una página nueva y obtenga los datos pasados de los pasos anteriores. Básicamente, es el mismo problema: necesito usar los datos publicados en forma utilizable dentro del cargador.
Traté de reemplazar el código anterior usando la cookie de sesión con todos los datos, pero tengo otros problemas con eso. La acción devuelve la cookie con los datos de la sesión, el cargador la lee y devuelve el nuevo estado. Desafortunadamente, falla en algunos escenarios. Si hay una sesión actual, el usuario puede volver a cargar la página, evitar el envío de información nuevamente y obtener resultados a medida que se enviaron los datos. No es así como funciona "normalmente" la web. Puedo cambiarlo destruyendo la sesión en cada carga, pero luego la primera solicitud POST no produce ningún resultado, si no hay JS en el lado del usuario. De lo contrario, es la mejor solución hasta ahora (pero limitada por el tamaño de la cookie).
¿Cómo pasar datos de la última acción al siguiente cargador o procesar la solicitud POST en el propio cargador?
Cómo pasar datos de la última acción al siguiente cargador
La única manera es usando sesiones y/o cookies. Si solo desea poder leer los datos de la sesión una vez y asegurarse de que ya no esté allí después de una recarga, puede usar session.flash(key, value) , luego en su cargador, cuando haga session.get(key) lo hará elimine la clave flash de la sesión, si confirma la sesión en el cargador, la cookie se actualizará para que ya no tenga esa clave, después de una recarga, no estará allí.
procesar la solicitud POST en el propio cargador
Esto no es posible, las funciones del cargador solo manejan solicitudes GET y OPTIONS, para cualquier otro método de solicitud solo se usa la función de acción.