es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

RxJS encuesta el servidor y actualiza el estado de la aplicación con nuevos datos.

02 Jun, 2023 Programación

El servidor node.js actualiza los datos cada 0.5 segundos. El cliente debe hacer una petición al servidor y traer nuevos datos usando RxJS. He hecho que el cliente haga la petición al servidor, las peticiones se realizan pero no puedo leer la respuesta del servidor. Creo que el estado no se actualiza debido a que poll_server devuelve timer.pipe() o que el reductor está creando un estado incorrecto. Llegué a esto a través de la plantilla de mi profesor, ¿por qué el despachador devolvería un Observable?

model.js
js
export function init_state(warnings) {
return {
warnings,
accept: ({ visit_site }) => { if (visit_site) return visit_site(warnings) }
}
}

dispatcher.js

import { from, of, timer } from 'rxjs'
import { concatMap, map } from 'rxjs/operators'
import { FRONT_PAGE } from './constants'</p>

<p>const poll_server = url => {
    return timer(0, 3000)
        .pipe(concatMap(() => from(fetch(url))
            .pipe(map(response => response.json())))
        )
}</p>

<p>export const server<em>dispatch = action => {
    switch (action.type) {
        case FRONT</em>PAGE: {
            const res = poll_server('http://localhost:8080/warnings')
            console.log(res)
            return res
        }
        default:
            return of(action)
    }
}

reducer.js
js
export function reduce(state, action) {
switch (action.type) {
case FRONT_PAGE:
console.log(REDUCER LLAMADO CON ACCIÓN ${FRONT_PAGE})
return init_state(action)
default:
return state
}
}

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la cual el dispatcher devolvería un Observable es para permitir la recuperación y procesamiento de datos de manera asíncrona. En este caso, timer.pipe() es utilizado para iniciar peticiones al servidor de manera recurrente cada 0.5 segundos. La respuesta del servidor es leída mediante from(fetch(url)).pipe(map(response => response.json())), lo que significa que la respuesta es encapsulada en un Observable, y por lo tanto puede ser manejada de manera asíncrona.

    El reducer no está creando un estado incorrecto, pero no está manejando la respuesta del servidor correctamente. En la función reduce, la función init_state espera un arreglo de warnings, pero la respuesta del servidor es un objeto que contiene un arreglo de warnings. Por lo tanto, la forma correcta de actualizar el estado sería la siguiente:

    export function reduce(state, action) {
  switch (action.type) {
    case FRONT_PAGE:
      console.log(`REDUCER CALLED WITH ACTION ${FRONT_PAGE}`);
      return init_state(action.warnings.warnings);
    default:
      return state;
  }
}

    Con este cambio, la función reduce actualizará el estado de manera correcta, y la interfaz de usuario mostrará la información más reciente del servidor.

Comments are closed.