Question

我希望能收到有关我的方法的反馈意见

背景

应用程序需要具有ReactJS组件，这些组件将从服务器获取数据。
组件将经常从服务器接收更新。
使用同一数据模型的组件将不止一个。
会有不同类型的数据模型。
仅需更改数据模型名称即可轻松添加新组件。
该应用程序可能是可配置的。

APPROACH

核心：

我创建了一个名为DataFetch的类，该类将从服务器获取数据，该服务器可以选择使用onReceive（）和onError（）方法接收Redux state options，SignalR options和回调。

When not configurated with Redux state options and SignalR options：dataFetch将具有相同的axios功能。
When configurated with Redux state options：DataFetch类将根据状态选项动态创建一个redux状态，并使用请求的结果对其进行更新。 Redux状态选项为：stateName和reducer。 actionTypes将使用stateName并根据请求的成功/错误响应动态创建。
When configurated with Signal options：dataFetch从服务器接收实时更新。如果已配置：它将更新redux状态并调用回调（onSuccess，onError）。

专业信息：

我正在使用axios从服务器中获取数据。
该状态是使用官方的Redux方法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;

使用动态Redux状态和SignalR反应无状态功能组件

0 个答案: