如何在React+TypeScript应用全局状态中存储复杂MQTT消息对象并实现组件按需重渲染？附React Redux实现示例

Hey there! No worries at all—this is a totally valid question, especially when you're just starting out with React. Your instinct to use a single MQTT client instead of multiple ones is spot-on; that's going to save you a ton of unnecessary network overhead and resource usage. Let's break this down step by step:

Absolutely! This is exactly the kind of scenario global state was designed for. Your MQTT topic data is shared across multiple components, so keeping it in a centralized store makes perfect sense. The key here is to manage updates properly so you don't end up with unnecessary re-renders.

The core idea is to only subscribe to the specific slice of state a component needs, not the entire global object. Both React's built-in Context API and Redux have tools to help with this:

• With Redux: Use memoized selectors (via the reselect library) to pick exactly the data your component needs.
• With Context: Split your context into smaller, focused contexts, or use React.memo alongside precise value extraction.

Redux is a great fit here because it has robust tooling for state slicing and performance optimization—perfect for managing this kind of key-value MQTT data.

Let's walk through a complete example using React+TypeScript, Redux Toolkit, and MQTT. First, install the necessary dependencies:

npm install @reduxjs/toolkit react-redux mqtt reselect

1. Define TypeScript Types #

First, let's set up types for our MQTT state to keep things type-safe:

// types/mqtt.ts
export type MqttState = Record<string, boolean | number | string>;

2. Create a Redux Slice for MQTT Data #

Redux Toolkit's createSlice simplifies writing reducers and actions. We'll create a slice to handle updating and clearing our MQTT data:

// features/mqtt/mqttSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { MqttState } from '../../types/mqtt';

const initialState: MqttState = {};

const mqttSlice = createSlice({
  name: 'mqtt',
  initialState,
  reducers: {
    updateMqttData: (state, action: PayloadAction<{ topic: string; value: boolean | number | string }>) => {
      // Redux Toolkit uses Immer under the hood, so we can mutate state directly
      state[action.payload.topic] = action.payload.value;
    },
    clearMqttData: () => ({})
  }
});

export const { updateMqttData, clearMqttData } = mqttSlice.actions;
export default mqttSlice.reducer;

3. Configure the Redux Store #

Next, we'll set up our store with the MQTT slice:

// app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import mqttReducer from '../features/mqtt/mqttSlice';

export const store = configureStore({
  reducer: {
    mqtt: mqttReducer
  }
});

// Export types for TypeScript support
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

4. Integrate the MQTT Client #

We'll create a custom React Hook to initialize the MQTT client, subscribe to topics, and dispatch updates to our Redux store:

// hooks/useMqttClient.ts
import { useEffect } from 'react';
import mqtt from 'mqtt';
import { useDispatch } from 'react-redux';
import { updateMqttData } from '../features/mqtt/mqttSlice';
import { AppDispatch } from '../app/store';

// Replace with your actual MQTT broker URL and topics
const MQTT_BROKER_URL = 'ws://your-mqtt-broker:8083';
const MQTT_TOPICS = ['config/#']; // Subscribes to all topics under "config/"

export const useMqttClient = () => {
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    // Create MQTT client
    const client = mqtt.connect(MQTT_BROKER_URL);

    // Handle successful connection
    client.on('connect', () => {
      console.log('Connected to MQTT broker');
      client.subscribe(MQTT_TOPICS, (err) => {
        if (err) console.error('Failed to subscribe:', err);
      });
    });

    // Process incoming messages
    client.on('message', (topic, payload) => {
      try {
        const payloadStr = payload.toString();
        let value: boolean | number | string;

        // Parse payload into appropriate type
        if (payloadStr === 'true') value = true;
        else if (payloadStr === 'false') value = false;
        else if (!isNaN(Number(payloadStr))) value = Number(payloadStr);
        else value = payloadStr;

        // Update Redux state
        dispatch(updateMqttData({ topic, value }));
      } catch (err) {
        console.error('Error parsing MQTT message:', err);
      }
    });

    // Clean up on component unmount
    return () => {
      client.end();
      console.log('Disconnected from MQTT broker');
    };
  }, [dispatch]);
};

5. Create Memoized Selectors (Critical for Performance) #

Using reselect, we'll create memoized selectors that only re-compute when the specific topic value changes. This prevents components from re-rendering when unrelated state updates:

// features/mqtt/mqttSelectors.ts
import { createSelector } from 'reselect';
import { RootState } from '../../app/store';

// Base selector to get the entire MQTT state
const selectMqttState = (state: RootState) => state.mqtt;

// Memoized selector for a specific topic
export const selectMqttTopic = (topic: string) =>
  createSelector(
    [selectMqttState],
    (mqttState) => mqttState[topic]
  );

6. Build Components That Use the State #

Now we can create components that only re-render when their specific topic data changes. Here's an example for the laser control:

// components/LaserControl.tsx
import { useSelector } from 'react-redux';
import { selectMqttTopic } from '../features/mqtt/mqttSelectors';

const LaserControl = () => {
  // Only re-renders when config.laser.enable changes
  const laserEnabled = useSelector(selectMqttTopic('config.laser.enable')) as boolean;

  return (
    <div className="laser-control">
      <h3>Laser Status</h3>
      <p>Enabled: {laserEnabled ? '✅ Active' : '❌ Inactive'}</p>
    </div>
  );
};

export default LaserControl;

Another example for the system value display:

// components/SystemValueDisplay.tsx
import { useSelector } from 'react-redux';
import { selectMqttTopic } from '../features/mqtt/mqttSelectors';

const SystemValueDisplay = () => {
  // Only re-renders when config.system.value changes
  const systemValue = useSelector(selectMqttTopic('config.system.value')) as number;

  return (
    <div className="system-value">
      <h3>System Metric</h3>
      <p>Current Value: {systemValue}</p>
    </div>
  );
};

export default SystemValueDisplay;

7. Wrap Everything in the Redux Provider #

Finally, we'll set up our main App component to use the Redux store and initialize the MQTT client:

// App.tsx
import { Provider } from 'react-redux';
import { store } from './app/store';
import { useMqttClient } from './hooks/useMqttClient';
import LaserControl from './components/LaserControl';
import SystemValueDisplay from './components/SystemValueDisplay';

function AppContent() {
  // Initialize MQTT client once
  useMqttClient();

  return (
    <div className="app">
      <h1>MQTT Data Dashboard</h1>
      <LaserControl />
      <SystemValueDisplay />
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <AppContent />
    </Provider>
  );
}

export default App;

• Redux Toolkit Benefits: It handles immutable updates automatically (via Immer) and includes helpful tools like Redux DevTools for debugging.
• Memoized Selectors: The reselect library ensures that components only re-render when their exact dependent data changes—this is the key to avoiding performance issues with large global state objects.
• Error Handling: The example includes basic error handling for MQTT messages, but you can expand this to log errors or show user-friendly alerts if needed.
• Type Safety: We used TypeScript throughout to ensure our state and actions are type-safe, which is especially helpful as your app grows.

内容的提问来源于stack exchange，提问作者akw