如何在React-Redux中每秒执行特定后台任务更新停车数组？

嘿，我来帮你捋捋这个问题～你提到的每秒分发Action的思路确实可能带来性能顾虑，但其实通过一些优化手段，完全可以做到高效且流畅的更新。先纠正个小细节：你说parking是二维布尔列表，但初始化是随机整数，应该是二维数值数组吧？布尔值减1不太合理，我下面就按数值数组来展开方案啦。

核心问题分析 #

每秒遍历整个二维数组并分发Action，主要的性能风险点有两个：

1. 频繁的不可变更新：每次手动复制大数组会带来额外的内存开销
2. 不必要的组件重渲染：如果组件订阅了整个parking数组，哪怕只有一个元素变化，整个组件都会重新渲染

优化方案 #

方案一：用Redux中间件管理定时任务+Immer优化不可变更新 #

推荐用Redux-Thunk（或者Redux-Saga，Thunk更轻量）来管理后台定时器，同时用Immer简化不可变更新的代码，减少手动复制数组的开销。

1. 定义Action和Reducer

// action types
const UPDATE_PARKING = 'parking/update';
const START_TIMER = 'timer/start';
const STOP_TIMER = 'timer/stop';

// action creators
export const updateParking = (newParking) => ({
  type: UPDATE_PARKING,
  payload: newParking
});

// 启动定时器的Thunk Action
export const startParkingTimer = () => (dispatch, getState) => {
  // 避免重复启动定时器
  if (getState().timerId) return;
  
  const timerId = setInterval(() => {
    const { parking } = getState();
    // 用Immer的produce简化不可变更新
    const newParking = parking.map(row => 
      row.map(cell => cell !== 0 ? cell - 1 : cell)
    );
    dispatch(updateParking(newParking));
  }, 1000);
  
  dispatch({ type: START_TIMER, payload: timerId });
};

// 停止定时器的Thunk Action
export const stopParkingTimer = () => (dispatch, getState) => {
  const { timerId } = getState();
  if (timerId) {
    clearInterval(timerId);
    dispatch({ type: STOP_TIMER });
  }
};

// Reducer（用Immer处理）
import produce from 'immer';

const initialState = {
  parking: [/* 你的初始二维数值数组 */],
  timerId: null
};

export const parkingReducer = (state = initialState, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case UPDATE_PARKING:
        draft.parking = action.payload;
        break;
      case START_TIMER:
        draft.timerId = action.payload;
        break;
      case STOP_TIMER:
        draft.timerId = null;
        break;
      default:
        // 什么都不做
    }
  });
};

2. 在组件中使用

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { startParkingTimer, stopParkingTimer } from './actions';

function ParkingLot() {
  const dispatch = useDispatch();
  // 优化：如果组件只需要某一部分数据，只订阅对应部分，减少重渲染
  const parking = useSelector(state => state.parking);

  useEffect(() => {
    // 组件挂载时启动定时器
    dispatch(startParkingTimer());
    // 组件卸载时清除定时器，避免内存泄漏
    return () => dispatch(stopParkingTimer());
  }, [dispatch]);

  // 渲染停车场
  return (
    <div className="parking-lot">
      {parking.map((row, rowIndex) => (
        <div key={rowIndex} className="parking-row">
          {row.map((cell, colIndex) => (
            <span key={`${rowIndex}-${colIndex}`} className="parking-cell">
              {cell}
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}

方案二：优化数据结构，只跟踪非零元素 #

如果你的parking数组很大，且大部分元素很快会变成0，那完全可以换一种数据结构：用对象存储仅非零的元素，key为行-列的字符串，value为剩余数值。这样每次更新只需要遍历非零元素，大大减少计算量。

示例代码（Reducer部分）

const initialState = {
  // 存储非零元素：{ "0-0": 5, "1-2": 3 }
  activeParking: {},
  // 记录数组的行列数，方便渲染
  rows: 10,
  cols: 10,
  timerId: null
};

export const parkingReducer = (state = initialState, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case 'UPDATE_ACTIVE_PARKING':
        draft.activeParking = action.payload;
        break;
      // ... 其他timer相关的case
    }
  });
};

// 更新逻辑的Thunk
export const updateActiveParking = () => (dispatch, getState) => {
  const { activeParking } = getState();
  const newActiveParking = { ...activeParking };
  
  Object.keys(newActiveParking).forEach(key => {
    newActiveParking[key] -= 1;
    // 如果减到0，就从对象中移除
    if (newActiveParking[key] === 0) {
      delete newActiveParking[key];
    }
  });
  
  dispatch({ type: 'UPDATE_ACTIVE_PARKING', payload: newActiveParking });
};

渲染的时候，根据rows和cols生成完整的二维结构，没有的key就显示0：

function ParkingLot() {
  const { activeParking, rows, cols } = useSelector(state => state);
  
  return (
    <div className="parking-lot">
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <div key={rowIndex} className="parking-row">
          {Array.from({ length: cols }).map((_, colIndex) => {
            const key = `${rowIndex}-${colIndex}`;
            const value = activeParking[key] || 0;
            return <span key={key}>{value}</span>;
          })}
        </div>
      ))}
    </div>
  );
}

关键优化总结 #

• 用中间件管理定时器：避免在组件中创建定时器导致的内存泄漏问题，统一在Redux层管理定时任务
• 优化不可变更新：用Immer替代手动复制数组，代码更简洁且性能更好
• 精准订阅数据：在useSelector中只订阅组件需要的部分，避免不必要的重渲染
• 优化数据结构：当大部分元素为0时，只跟踪活跃元素，减少每次更新的计算量

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