在线商城库存实时更新引发页面冻结：Redux Toolkit 异步困境与紧急修复

// 调试用日志中间件
const logger = store => next => action => {
  const start = performance.now()
  const result = next(action)
  const end = performance.now()
  console.log(`Action ${action.type} 耗时: ${(end - start).toFixed(2)}ms`)
  return result
}

Action inventory/updateInventory 耗时: 4.23ms
Action inventory/updateInventory 耗时: 6.71ms 
Action inventory/updateInventory 耗时: 8.92ms
...
// 随时间推移，耗时持续增加

// 性能分析日志片段
[PERFORMANCE] 长任务检测: 持续时间 1243ms
[PERFORMANCE] 长任务栈:
  updateInventoryState (inventorySlice.js:45)
  dispatch (redux.js:684)
  handleSocketMessage (inventoryService.js:78)
  WebSocket.onmessage (socket.js:32)

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import inventoryService from '../services/inventoryService';

// 初始状态
const initialState = {
  items: [], // 存储所有商品的库存信息
  loading: false,
  error: null
};

// 异步更新库存
export const updateInventory = createAsyncThunk(
  'inventory/update',
  async (inventoryData, thunkAPI) => {
    try {
      return await inventoryService.updateInventory(inventoryData);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

// 库存Slice
const inventorySlice = createSlice({
  name: 'inventory',
  initialState,
  reducers: {
    // 实时更新库存
    updateInventoryState: (state, action) => {
      const updatedItems = action.payload;
      // 遍历所有更新的库存项并更新状态
      updatedItems.forEach(updatedItem => {
        const index = state.items.findIndex(item => item.id === updatedItem.id);
        if (index !== -1) {
          state.items[index] = { ...state.items[index], ...updatedItem };
        } else {
          state.items.push(updatedItem);
        }
      });
    }
  },
  extraReducers: (builder) => {
    // 处理异步操作状态
    builder
      .addCase(updateInventory.pending, (state) => {
        state.loading = true;
      })
      .addCase(updateInventory.fulfilled, (state, action) => {
        state.loading = false;
        // 调用同步reducer更新状态
        inventorySlice.caseReducers.updateInventoryState(state, action);
      })
      .addCase(updateInventory.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { updateInventoryState } = inventorySlice.actions;
export default inventorySlice.reducer;

// ProductList.jsx
import React from 'react';
import { useSelector } from 'react-redux';
import ProductItem from './ProductItem';

const ProductList = () => {
  // 获取所有商品和库存信息
  const { items: products } = useSelector(state => state.products);
  const { items: inventory } = useSelector(state => state.inventory);
  
  return (
    <div className="product-list">
      {products.map(product => (
        <ProductItem 
          key={product.id} 
          product={product} 
          inventory={inventory.find(item => item.productId === product.id)} 
        />
      ))}
    </div>
  );
};

export default ProductList;

// ProductItem.jsx
import React from 'react';

const ProductItem = ({ product, inventory }) => {
  return (
    <div className="product-item">
      <h3>{product.name}</h3>
      <p>价格: ¥{product.price}</p>
      <p className={inventory?.quantity <= 10 ? 'low-stock' : ''}>
        库存: {inventory?.quantity || 0}
      </p>
      <button disabled={!inventory?.inStock}>加入购物车</button>
    </div>
  );
};

export default ProductItem;

// 库存更新频率日志
[INVENTORY] 10:23:45 收到库存更新 - 5条记录
[INVENTORY] 10:23:46 收到库存更新 - 3条记录
[INVENTORY] 10:23:46 收到库存更新 - 7条记录
[INVENTORY] 10:23:47 收到库存更新 - 4条记录
...

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import inventoryService from '../services/inventoryService';

// 初始状态 - 改为对象结构
const initialState = {
  items: {}, // 以商品ID为键存储库存信息
  loading: false,
  error: null,
  lastUpdated: null // 记录最后更新时间
};

// 异步更新库存
export const updateInventory = createAsyncThunk(
  'inventory/update',
  async (inventoryData, thunkAPI) => {
    try {
      return await inventoryService.updateInventory(inventoryData);
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

// 库存Slice
const inventorySlice = createSlice({
  name: 'inventory',
  initialState,
  reducers: {
    // 实时更新库存 - 优化版本
    updateInventoryState: (state, action) => {
      const updatedItems = action.payload;
      // 直接通过ID更新，避免遍历查找
      updatedItems.forEach(updatedItem => {
        state.items[updatedItem.id] = { 
          ...(state.items[updatedItem.id] || {}), 
          ...updatedItem,
          updatedAt: Date.now() // 记录单项更新时间
        };
      });
      state.lastUpdated = Date.now(); // 更新最后更新时间
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(updateInventory.pending, (state) => {
        state.loading = true;
      })
      .addCase(updateInventory.fulfilled, (state, action) => {
        state.loading = false;
        inventorySlice.caseReducers.updateInventoryState(state, action);
      })
      .addCase(updateInventory.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { updateInventoryState } = inventorySlice.actions;
export default inventorySlice.reducer;

import { store } from '../store';
import { updateInventoryState } from '../slices/inventorySlice';

// 节流函数 - 限制单位时间内最多执行一次
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 批量处理库存更新的函数
function processInventoryUpdates(updates) {
  // 合并相同商品的更新，只保留最新的一次
  const mergedUpdates = {};
  updates.forEach(update => {
    mergedUpdates[update.id] = update;
  });
  
  // 转换为数组并发送到Redux
  store.dispatch(updateInventoryState(Object.values(mergedUpdates)));
}

// 创建节流版本的更新函数 - 限制为每300ms最多更新一次
const throttledUpdate = throttle(processInventoryUpdates, 300);

// WebSocket消息处理
function setupInventoryWebSocket() {
  const socket = new WebSocket('wss://api.example.com/inventory-updates');
  
  socket.onmessage = (event) => {
    try {
      const updates = JSON.parse(event.data);
      if (Array.isArray(updates) && updates.length > 0) {
        // 使用节流函数处理更新
        throttledUpdate(updates);
      }
    } catch (error) {
      console.error('处理库存更新失败:', error);
    }
  };
  
  // 其他WebSocket事件处理...
  return socket;
}

export default {
  setupInventoryWebSocket,
  updateInventory: async (inventoryData) => {
    // 原有的API调用逻辑...
    const response = await fetch('/api/inventory', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(inventoryData)
    });
    return response.json();
  }
};

// 优化后的ProductList.jsx
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import ProductItem from './ProductItem';

const ProductList = () => {
  // 获取所有商品和库存信息
  const { items: products } = useSelector(state => state.products);
  const { items: inventory } = useSelector(state => state.inventory);
  
  // 使用useMemo缓存映射结果，避免每次渲染重新计算
  const productItems = useMemo(() => {
    return products.map(product => ({
      product,
      inventory: inventory[product.id] // 直接通过ID获取，效率更高
    }));
  }, [products, inventory]);
  
  return (
    <div className="product-list">
      {productItems.map(({ product, inventory }) => (
        <ProductItem 
          key={product.id} 
          product={product} 
          inventory={inventory} 
        />
      ))}
    </div>
  );
};

export default ProductList;

// 优化后的ProductItem.jsx
import React, { memo } from 'react';

// 使用memo包装组件，避免不必要的重渲染
const ProductItem = memo(({ product, inventory }) => {
  // 使用useMemo缓存计算结果
  const isLowStock = useMemo(() => {
    return inventory?.quantity <= 10;
  }, [inventory?.quantity]);
  
  return (
    <div className="product-item">
      <h3>{product.name}</h3>
      <p>价格: ¥{product.price}</p>
      <p className={isLowStock ? 'low-stock' : ''}>
        库存: {inventory?.quantity || 0}
      </p>
      <button disabled={!inventory?.inStock}>加入购物车</button>
    </div>
  );
}, 
// 自定义比较函数，只有当相关属性变化时才重渲染
(prevProps, nextProps) => {
  // 商品信息不变且库存数量和状态不变时，不重渲染
  if (prevProps.product.id === nextProps.product.id &&
      prevProps.inventory?.quantity === nextProps.inventory?.quantity &&
      prevProps.inventory?.inStock === nextProps.inventory?.inStock) {
    return true; // 不重渲染
  }
  return false; // 需要重渲染
});

export default ProductItem;

// Web Worker脚本
self.onmessage = function(e) {
  const { type, data } = e.data;
  
  if (type === 'PROCESS_UPDATES') {
    // 处理库存更新数据
    const processedUpdates = processInventoryUpdates(data.updates, data.currentInventory);
    self.postMessage({
      type: 'UPDATES_PROCESSED',
      data: processedUpdates
    });
  }
};

// 复杂的库存更新处理逻辑
function processInventoryUpdates(updates, currentInventory) {
  // 这里可以包含复杂的计算逻辑，例如：
  // 1. 库存变动趋势分析
  // 2. 库存预警判断
  // 3. 历史数据对比
  // 4. 其他复杂业务逻辑
  
  return updates.map(update => {
    const current = currentInventory[update.id] || {};
    // 计算库存变动百分比
    const changePercent = current.quantity 
      ? Math.round(((update.quantity - current.quantity) / current.quantity) * 100)
      : 0;
      
    // 判断是否需要预警
    const needsWarning = update.quantity <= 5 && update.quantity < (current.quantity || 0);
    
    return {
      ...update,
      changePercent,
      needsWarning,
      updatedAt: Date.now()
    };
  });
}

// 在inventoryService.js中使用Web Worker
// ... 其他代码 ...

// 创建Web Worker
let inventoryWorker;
if (window.Worker) {
  inventoryWorker = new Worker('./inventoryWorker.js');
  
  // 监听Worker返回的结果
  inventoryWorker.onmessage = function(e) {
    if (e.data.type === 'UPDATES_PROCESSED') {
      // 处理完的更新发送到Redux
      throttledUpdate(e.data.data);
    }
  };
} else {
  console.warn('当前浏览器不支持Web Worker，将使用主线程处理库存更新');
}

// 修改WebSocket消息处理
socket.onmessage = (event) => {
  try {
    const updates = JSON.parse(event.data);
    if (Array.isArray(updates) && updates.length > 0) {
      // 获取当前库存状态
      const currentInventory = store.getState().inventory.items;
      
      if (inventoryWorker) {
        // 使用Web Worker处理更新
        inventoryWorker.postMessage({
          type: 'PROCESS_UPDATES',
          data: {
            updates,
            currentInventory
          }
        });
      } else {
        // 降级处理：直接在主线程处理
        const processedUpdates = processInventoryUpdates(updates, currentInventory);
        throttledUpdate(processedUpdates);
      }
    }
  } catch (error) {
    console.error('处理库存更新失败:', error);
  }
};

// ... 其他代码 ...