Простой пример приложения на react с reduxjs/toolkit, обновление от signalR

Давайте рассмотрим пример использования Redux Toolkit в сочетании с SignalR в React-приложении. Начнем с настройки хранилища Redux с помощью Redux Toolkit: Вот пример использования Redux Toolkit с обновлениями от SignalR в React-приложении:

1. Настройте свое хранилище Redux с помощью Redux Toolkit:

import { createSlice, configureStore } from '@reduxjs/toolkit';
// Slice для обновлений от SignalR
const signalRSlice = createSlice({
 name: 'signalR',
 initialState: {
   messages: [],
 },
 reducers: {
   addMessage: (state, action) => {
     state.messages.push(action.payload);
   },
 },
});
// Экшены и редьюсеры из слайса
export const { addMessage } = signalRSlice.actions;
export default configureStore({
 reducer: {
   signalR: signalRSlice.reducer,
 },
});

2. Настройте соединение с SignalR в вашем React-компоненте:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
import { addMessage } from './store';
function App() {
 const dispatch = useDispatch();
 useEffect(() => {
   const connection = new HubConnectionBuilder()
     .withUrl('/chat')
     .configureLogging(LogLevel.Information)
     .build();
   connection.on('ReceiveMessage', (message) => {
     dispatch(addMessage(message));
   });
   connection.start()
     .catch((err) => console.error('SignalR Connection Error: ', err));
   return () => {
     connection.stop();
   };
 }, [dispatch]);
 return (
   <div>
     {/* Отображение сообщений из Redux-хранилища */}
     {messages.map((message, index) => (
       <div key={index}>{message}</div>
     ))}
   </div>
 );
}

В этом примере:

1. Мы создаем слайс Redux с помощью createSlice() из Redux Toolkit. Этот слайс содержит массив сообщений, получаемых от SignalR.
2. В компоненте App мы используем useEffect() для установки соединения с SignalR и регистрации обработчика события ReceiveMessage.
3. Когда мы получаем новое сообщение от SignalR, мы вызываем экшен addMessage(), чтобы добавить его в Redux-хранилище.
4. Наконец, мы отображаем сообщения из Redux-хранилища в нашем компоненте.

Этот подход позволяет нам управлять обновлениями от SignalR с помощью Redux Toolkit, что делает наше приложение более масштабируемым и тестируемым.