Я разрабатываю веб-сайт React, используя Redux в качестве хранилища состояний, который в первую очередь предназначен для отображения текущей совокупности элементов пользователю, используя живые обновления для обновления совокупности элементов с помощью SignalR.
СпособЯ хотел сделать так, чтобы SignalR отправлял сообщения об обновлении элементов, чтобы инициализировать начальную популяцию при подключении к концентратору сервера, а также обновления через тот же тип сообщения, что и время.У меня была бы функция, которая принимает сообщение SignalR и преобразует его в действие Redux и отправляет в хранилище Redux, которое затем использует это действие для обновления состояния, а затем пользовательский интерфейс.
Так что идея
1) Соединение с концентратором сервера SignalR, с функцией обработчика клиента, настроенной для сообщений ItemUpdate
2) Когда сервер получает Connect () от клиента, он отправляет сообщения ItemUpdate для всех текущих элементовв популяции
3) Клиент получает эти сообщения от SignalR, преобразуется в действия и отправляет их в хранилище Redux
4) Redux обновляет хранилище на основе информации о новом элементе и отображает пользовательский интерфейсit
5) Сервер обнаруживает, что элемент был добавлен или обновлен, и отправляет клиенту новое сообщение ItemUpdate для обновления
6) Повтор
Однако яЯ не уверен, где именно я должен хранить синглтон-концентратор, так как это противоречит дизайну React / Redux.Кто-нибудь может посоветовать лучший способ сделать это?
Мое главное приложение
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import 'rxjs';
import store from './store/index';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
Файл создания моего магазина
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/index';
import signalRMiddleware from '../signalr/middleware';
const store = createStore(rootReducer, applyMiddleware(signalRMiddleware));
export default store;
Мое промежуточное ПО для исходящих сообщений SignalR насервер (закомментировано, поскольку у меня нет доступа к объекту-концентратору, который мне нужен для того, чтобы это работало
export default function signalRMiddleware(store: any) {
return (next: any) => (action: any) => {
if (action.signalR) {
switch (action.type) {
default:
{
//const myCurrentState = store.getState().objectWithinState;
//_hub.server.methodOnTheServer2(action.type, myCurrentState);
}
}
}
return next(action);
}
}
Теперь для входящих сообщений ... это оболочка функции запуска signalR, которую я получил отонлайн-пример - еще не реализован, так как у меня еще нет концентратора и соединения, и я не уверен, куда это должно идти
export function signalRStart(store: any, callback: Function) {
_hub = $.connection.myHubName;
_hub.client.firstClientFunction = (p1: any) => {
store.dispatch({ type: "SERVER_CALLED_ME", a: p1 });
}
_hub.client.secondClientFunction = (p1: string, p2: string) => {
store.dispatch({ type: "SERVER_CALLED_ME_2", value: p1 + p2 });
}
}
$.connection.hub.start(() => callback());
}
И это пример, приведенный на веб-сайте, на котором я нашел код, чтобы связать все этовместе, однако я не вижу, как это может интегрироваться с React / Redux, как на моей главной странице Index, я должен передать созданное хранилище компоненту Provider, и поэтому я не могу поместить создание хаба ниже этого, так как хаб нужен длякомпонент промежуточного программного обеспечения signalr, который передается в создание магазина
let _hub;
let store = createStore(
todoApp,
// applyMiddleware() tells createStore() how to handle middleware
applyMiddleware(signalRMiddleware)
)
// Make sure signalr is connected
signalRStart(store, () => {
render((...),
document.getElementById("app-container"));
});
Может кто-нибудь посоветовать, как лучше интегрировать SignalR в мое приложение React / Redux?