Redux：向嵌套状态添加数据——日历应用开发技术问询

我明白你现在卡在Redux嵌套状态的更新上了——这种多层嵌套的结构确实容易让人头疼，尤其是要保证不可变性的前提下。别担心，我来一步步给你讲清楚怎么实现给指定时段添加事件的功能。

首先咱们得明确需求：要找到指定星期几（比如Monday）、指定时间段（比如9:00am）的events数组，把新的事件项加进去，同时严格遵守Redux的不可变更新原则——绝对不能直接修改原状态对象，必须返回新的副本。

第一步：定义Action类型和Action创建函数 #

首先咱们得创建一个触发更新的action，用来传递要添加的事件信息，包括目标星期几、时间段，还有事件本身：

// 定义action类型
export const ADD_EVENT = 'ADD_EVENT';

// action创建函数
export const addEvent = (dayName, time, event) => ({
  type: ADD_EVENT,
  payload: {
    dayName,
    time,
    event
  }
});

第二步：在Reducer中处理更新逻辑 #

这是最关键的部分，因为嵌套结构需要逐层拷贝，避免修改原状态。咱们可以用数组的map方法来生成新数组，用对象展开运算符...来拷贝对象：

import { initialState } from './yourInitialStateFile';
import { ADD_EVENT } from './actions';

const calendarReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_EVENT: {
      const { dayName, time, event } = action.payload;
      
      // 遍历days数组，找到目标day并更新
      const updatedDays = state.days.map(day => {
        // 如果不是目标day，直接返回原对象
        if (day.day !== dayName) return day;
        
        // 如果是目标day，更新它的slots数组
        const updatedSlots = day.slots.map(slot => {
          // 如果不是目标时段，直接返回原slot
          if (slot.time !== time) return slot;
          
          // 是目标时段的话，拷贝原events数组并添加新事件
          return {
            ...slot,
            events: [...slot.events, event]
          };
        });
        
        // 返回更新后的day对象
        return {
          ...day,
          slots: updatedSlots
        };
      });
      
      // 返回整个新的状态对象
      return {
        ...state,
        days: updatedDays
      };
    }
    default:
      return state;
  }
};

export default calendarReducer;

为什么要这么写？ #

• 不可变性：Redux要求reducer是纯函数，不能修改原状态。用map生成新数组，用...展开拷贝对象/数组，都是为了创建新的引用，保证原状态不被篡改。
• 精准定位：通过两层map分别找到目标星期和目标时段，只更新需要修改的部分，其他部分保持原样，提升效率。

如何使用？ #

在你的组件里，调用dispatch来触发这个action就行，比如：

// 假设你用了useDispatch钩子
import { useDispatch } from 'react-redux';
import { addEvent } from './actions';

function YourComponent() {
  const dispatch = useDispatch();
  
  const handleAddEvent = () => {
    // 示例事件对象
    const newEvent = {
      id: Date.now(),
      title: 'Team Meeting',
      description: 'Discuss project progress'
    };
    
    // 给Monday的9:00am添加事件
    dispatch(addEvent('Monday', '9:00am', newEvent));
  };
  
  return <button onClick={handleAddEvent}>Add Meeting</button>;
}

这样就能完美实现给嵌套状态里的指定events数组添加单个数据项的需求啦！

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