React Redux同组件多实例互斥切换异常问题咨询

问题根源分析 #

1. 全局状态设计缺陷：当前Redux store仅维护一个selected布尔值，所有Box实例共享该状态，导致点击任意实例都会同步改变所有实例的选中状态。
2. 本地状态与Redux状态不同步：组件内部用useState维护的status和Redux的selectedStatus逻辑冲突，点击时基于旧的Redux状态更新本地状态，引发首次点击无响应的问题。

解决方案 #

修改Redux状态存储选中实例的唯一ID，让每个Box实例通过自身ID判断是否被选中，彻底解耦实例间的状态关联。

1. 更新Redux Slice（boxSlice.js）

import { createSlice } from '@reduxjs/toolkit';

export const boxSlice = createSlice({
  name: "box",
  initialState: {
    selectedId: null, // 存储选中实例的ID，初始为未选中状态
  },
  reducers: {
    setSelectedId: (state, action) => {
      state.selectedId = action.payload; // 接收并设置选中的实例ID
    },
  },
});

export const { setSelectedId } = boxSlice.actions;
export default boxSlice.reducer;

2. 修改Box组件（Box.js）

移除本地状态，通过props接收唯一ID，直接从Redux状态推导自身选中状态：

import { useSelector, useDispatch } from 'react-redux';
import { setSelectedId } from './slices/boxSlice';

export function Box({ id }) { // 接收唯一ID作为props
  const selectedId = useSelector((state) => state.box.selectedId);
  const dispatch = useDispatch();
  const isSelected = selectedId === id;

  const onSelect = () => {
    dispatch(setSelectedId(id)); // 点击时将当前实例ID设为选中ID
  };

  return (
    <div tabIndex="0" onClick={onSelect} className="box">
      {isSelected ? "Selected" : "Unselected"}
    </div>
  );
}

3. 父组件中传入唯一ID

渲染Box实例时，为每个实例分配不同的唯一ID：

// 示例父组件
import { Box } from './Box';

function App() {
  return (
    <div>
      <Box id="box-1" />
      <Box id="box-2" />
    </div>
  );
}

export default App;

效果说明 #

• 点击任意Box实例，该实例会切换为选中状态，其余实例自动取消选中。
• 彻底解决首次点击无响应的问题，组件状态完全由Redux全局状态驱动，不存在本地状态不同步的情况。

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