Redux存储3万条数据致React Native应用崩溃的解决方案咨询

Hey there, let's dig into this Redux + large dataset crash issue you're facing with your React Native app! When dealing with 30k+ records, small inefficiencies in data handling can quickly snowball into memory spikes or main thread blocking. Here are actionable suggestions to fix the crash:

First, double-check how you're structuring your state—poor normalization is a common culprit here:

• Stick to flat, entity-based state: Instead of storing an array of 30k objects, split your state into entities (a dictionary mapping item.id to the full item) and ids (an array of sorted/filtered IDs). This turns updates from O(n) to O(1) and avoids copying huge arrays on every change.
• Trim unnecessary fields: If each item has 12 keys, audit which ones are actually used by your components. Drop any unused fields before storing them in Redux to cut down on memory usage.
• Use normalizr wisely: If you're already using it, ensure your schema is minimal. Avoid nesting related data unless absolutely necessary—keep references via IDs instead.

Merging new and old data is where many apps stumble with large datasets:

• Adopt Immer for immutable updates: Instead of using spread operators (...) or concat (which create full copies of large arrays/objects), use immer to only modify the parts of state that change. This drastically reduces memory overhead. Example:

  import produce from 'immer';
  
  const dataReducer = produce((draft, action) => {
    switch (action.type) {
      case 'MERGE_NEW_DATA':
        // Only update/insert changed entities
        Object.assign(draft.entities, action.payload.entities);
        // Update IDs without duplicating (use Set for O(1) lookups)
        draft.ids = Array.from(new Set([...draft.ids, ...action.payload.ids]));
        break;
      default:
        return draft;
    }
  }, initialState);
  

• Batch updates instead of merging one-by-one: If your WebSocket pushes individual items, buffer them (e.g., collect 500 items at a time) before merging into Redux. This reduces the number of state updates and re-renders.

You mentioned using lodash's debounce—let's make sure it's working for you, not against you:

• Adjust debounce timing: If you're debouncing too aggressively (e.g., 100ms), you might end up with a huge backlog of data that gets processed all at once. Try a longer window (300-500ms) and combine it with a buffer to limit batch size.
• Avoid debouncing the entire Redux update: Instead, debounce the buffer processing logic, not the dispatch itself. Example:

  import debounce from 'lodash/debounce';
  
  let dataBuffer = [];
  const processBatch = debounce(() => {
    if (dataBuffer.length === 0) return;
    // Convert buffer to entity format
    const batchEntities = dataBuffer.reduce((acc, item) => {
      acc[item.id] = item;
      return acc;
    }, {});
    dispatch({ type: 'MERGE_NEW_DATA', payload: { entities: batchEntities, ids: dataBuffer.map(i => i.id) } });
    dataBuffer = [];
  }, 400);
  
  // WebSocket message handler
  const onWebSocketMessage = (message) => {
    const item = JSON.parse(message.data);
    dataBuffer.push(item);
    processBatch();
  };
  

Even if state handling is efficient, 30k records can trigger thousands of component re-renders:

• Use Reselect for memoized selectors: Create cached selectors to avoid recalculating derived data (like the full list of items) on every state change. Example:

  import { createSelector } from 'reselect';
  
  const selectEntities = state => state.data.entities;
  const selectIds = state => state.data.ids;
  export const selectAllItems = createSelector(
    [selectEntities, selectIds],
    (entities, ids) => ids.map(id => entities[id])
  );
  

• Optimize useSelector calls: Pass shallowEqual as the comparison function to avoid re-renders when the state reference changes but data hasn't:

  import { useSelector, shallowEqual } from 'react-redux';
  
  const items = useSelector(selectAllItems, shallowEqual);
  

React Native's main thread is sensitive to long-running tasks—move data processing elsewhere:

• Use Web Workers: Parse JSON and normalize incoming WebSocket data in a background worker, then send only the processed entities to the main thread for Redux updates.
• Consider persistent storage for old data: If you don't need all 30k items in memory at once, archive older records to AsyncStorage or a lightweight database like Realm. Load them on demand instead of keeping everything in Redux.

Finally, use React Native's tools to pinpoint the exact cause:

• Flipper's Performance Plugin: Track memory usage over time to see when spikes occur (e.g., during data merges).
• Log memory at key points: Use console.log('Memory:', console.memory.usedJSHeapSize) before and after data merges to identify where memory balloons.

These changes should help you handle 30k+ records without crashing. Start with optimizing state structure and merging logic—those are usually the biggest wins.

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