Redux中基于ID添加show属性、更新状态并获取结果的技术问询

嘿，我瞅见你这段Redux reducer的代码有点小问题，咱们来一步步修复它，让它能正确给指定ID的item添加show属性并完成状态更新。

原代码的问题分析 #

你原来的代码有两个关键问题：

1. map函数缺少返回值：只有当ID匹配时做了修改，但没有返回新对象；不匹配的情况也没返回原对象，这样处理后items数组会变成全是undefined的数组，完全不符合预期。
2. 直接修改原状态对象：obj['show'] = action.payload.status是直接修改了state里的原对象，违反了Redux要求的**不可变更新（immutable）**原则，这会导致组件无法检测到状态变化，从而不重新渲染。

正确的Reducer实现方案 #

咱们修改一下actionTypes.UpdateMaterialToShow分支的代码，保证不可变更新且返回正确的数组：

case actionTypes.UpdateMaterialToShow: 
  return { 
    ...state, // 展开原state，保留其他未修改的状态
    items: state.items.map(obj => { 
      // 找到匹配ID的对象，返回一个新对象添加show属性
      if(obj.id === action.payload.id){ 
        return {
          ...obj, // 拷贝原对象的所有属性
          show: action.payload.status // 添加或覆盖show属性
        }
      }
      // 不匹配的对象直接返回原对象，保持状态不变
      return obj;
    }) 
  }

关键细节解释 #

• 不可变更新：用对象展开运算符...obj创建新对象，而不是修改原对象，这样Redux能检测到状态变化，触发组件重新渲染。
• 完整的map返回逻辑：每个遍历的对象都有明确的返回值，确保items数组的结构和长度保持正确。
• 只更新需要修改的部分：通过...state展开原状态，只替换items数组，其他状态属性不受影响。

配套的Action Creator和组件调用 #

为了让这个reducer能正常工作，你还需要对应的action creator，以及在组件里调用它：

1. 编写Action Creator

// actions.js
export const updateMaterialToShow = (id, status) => ({
  type: actionTypes.UpdateMaterialToShow,
  payload: { id, status }
})

2. 组件中调用（以React Hooks为例）

import { useDispatch } from 'react-redux';
import { updateMaterialToShow } from './actions';

function MaterialItem({ item }) {
  const dispatch = useDispatch();

  const toggleShow = () => {
    // 这里可以根据需求传入status，比如切换布尔值或者设置特定状态
    dispatch(updateMaterialToShow(item.id, !item.show));
  };

  return (
    <div>
      <span>{item.material}</span>
      <button onClick={toggleShow}>
        {item.show ? '隐藏' : '显示'}
      </button>
    </div>
  );
}

这样当你点击按钮时，就能给对应ID的item添加/更新show属性，同时正确更新Redux状态啦。

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