¿Cuál es la mejor manera de actualizar el estado con Signalr? En este momento, envío datos dentro on devolución de llamada del método y accedo a ellos usando useSelector dentro de otro componente. Me pregunto si este es el enfoque óptimo.
useEffect(()=> { const connection = $.hubConnection("http://xxxx/signalr", { useDefaultPath: false }) const proxy = connection.createHubProxy("exampleHub") proxy.on("action", function(data) { dispatch(setStatus(data)) } })Slice.js:
export const monitorSlice = createSlice({ name: "example", initialState: { status: {}, }, reducers: { setStatus(state, {payload}) => { state.status = payload } } });Su enfoque funcionará. Aquí hay otro enfoque que puede tener:
Otro enfoque que es más agnóstico es usar un middleware
import { Middleware } from 'redux' import { monitorActions } from './monitorSlice'; const monitorMiddleware: Middleware = store => next => action => { if (!monitorActions.startConnecting.match(action)) { return next(action); } const connection = $.hubConnection("http://xxxx/signalr", { useDefaultPath: false }) const proxy = connection.createHubProxy("exampleHub") proxy.on("action", function(data) { dispatch(setStatus(data)) }); next(action); } export default monitorMiddleware;Luego, dentro de su aplicación de reacción cuando desee establecer la conexión
useEffect(()=> { dispatch(monitorActions.startConnecting()) }, []) Luego, cuando configure su tienda, no olvide agregar su nuevo monitorMiddleware middlewareMiddleware:
export const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => { return getDefaultMiddleware().concat([monitorMiddleware]) }, });Otro enfoque es usar createApi .