Реакция функционального компонента без сохранения состояния с динамическим состоянием c Redux и SignalR - PullRequest
Новая
       19

Реакция функционального компонента без сохранения состояния с динамическим состоянием c Redux и SignalR

1 голос
/ 16 марта 2020

Буду признателен за отзыв о моем подходе:

ПРЕДПОСЫЛКИ

  • Приложение должно иметь ReactJS компонентов, которые будут извлекать данные с сервера.
  • Компоненты будут получать частые обновления с сервера.
  • Будет несколько компонентов, использующих одну и ту же модель данных.
  • Будут разные типы моделей данных.
  • Должно быть легко добавлять новые компоненты, просто изменение имени модели данных.
  • Приложение, вероятно, будет настраиваемым.

ПОДХОД

Ядро:

Я создал класс DataFetch, который будет извлекать данные с сервера, который при необходимости может получать Redux state options, SignalR options и обратные вызовы, используя методы onReceive () и onError ().

  • When not configurated with Redux state options and SignalR options: dataFetch будет иметь ту же функциональность ax ios.

  • When configurated with Redux state options: класс DataFetch будет динамически создавать состояние избыточности в соответствии с укажите параметры и обновляйте их, используя результат запроса. Опции состояния Redux: stateName и reducer. actionTypes будет динамически создаваться с использованием stateName и для ответа об успешном / ошибочном запросе.

  • When configurated with Signal options: dataFetch получает обновления в режиме реального времени от сервера. если сконфигурирован: он обновит состояние избыточности и вызовет обратные вызовы (onSuccess, onError).

Дополнительная информация:

  • Я использую ax ios для извлечения данных с сервера.
  • Это состояние было динамически создано с использованием официального подхода с использованием избыточности: ReducerManager .
  • Я использую Core SignalR для добавления в приложение функций реального времени.
  • Я создал хук useSignalR для простого использования SignalR с компонентами React.
  • Все это разделено на соответствующие классы, функции для удобного тестирования.

Как использовать?

Я создал хук называется useDataFetch, чтобы легко использовать эту функциональность с `компонентами React без состояния.

Результатом хука будет объект, подобный этому: { data, error, isLoading }.

Синтаксис для использования ловушки такой: 

import React from 'react';
import { useSignalRContext } from './core/signalR';
import {
  useDataFetch,
  SignalRHubOptions,
  ReduxStoreOptions
} from './core/dataFetch';

const ExampleComponent = props => {
  const { dataModelId } = props;
  const { someHubConnection } = useSignalRContext();

  const signalRHubOptions = useMemo(
    () =>
      new SignalRHubOptions({
        hubConnection: someHubConnection,
        // Multiple components can be created for the same hubConnection.
        // Therefore, we need to add a dataChangeMethodName by the component instance,
        // otherwise, all instances of that component will receive the same message.
        dataChangeMethodName: `DataChanged-${dataModelId}`
      }),
    [someHubConnection, dataModelId]
  );

  const reduxStoreOptions = useMemo(
    () =>
      new ReduxStoreOptions({
        // Use diferrent stateName for different conponents.
        stateName: `${dataModelId}_state`,
        initialState: []
      }),
    [dataModelId]
  );

  // Receive data when:
  //  - perform the request with success;
  //  - signalR send a message;
  //  - redux state receive a update with the actionType SUCCESS;
  // Receive error when:
  //  - perform the request with error;
  //  - redux state receive a update with the actionType FAILURE.
  const { data, error, isLoading } = useDataFetch({
    url: '/endpoint/${dataModelId}',
    data: {
      param1: 'value1'
    },
    signalRHubOptions: signalRHubOptions,
    reduxStoreOptions: reduxStoreOptions
  });

  return {
    /* render the component with the data or error or isLoading state */
  };
};

export default ExampleComponent;
...