如何在Redux的Reducer中向allLogbooks数组添加Logbook对象？

别担心，我来一步步帮你把这个逻辑补全！咱们从基础部分开始，搭建完整的流程：

1. 定义初始状态 #

首先你的Reducer需要一个初始状态，其中包含allLogbooks数组，通常还会加上加载状态、错误状态这类辅助字段，示例如下：

const initialState = {
  allLogbooks: [], // 存储所有Logbook对象的数组
  loading: false,
  error: null
};

2. 创建Action类型和Action创建函数 #

你需要先定义一个Action类型标识“添加Logbook”操作，再写对应的Action创建函数传递新的Logbook数据：

// 定义Action类型
export const ADD_LOGBOOK = 'ADD_LOGBOOK';

// Action创建函数，接收服务器返回的新Logbook对象作为参数
export const addLogbook = (newLogbook) => ({
  type: ADD_LOGBOOK,
  payload: newLogbook // 把新的Logbook对象放在payload里传递给Reducer
});

3. 在Reducer中处理添加逻辑 #

这是核心部分，记住永远不能直接修改原state，必须返回新的状态对象。处理ADD_LOGBOOK Action时，用扩展运算符复制原有allLogbooks数组，再追加新的Logbook对象：

import { ADD_LOGBOOK } from './actions';

const logbookReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_LOGBOOK:
      return {
        ...state, // 复制原state的其他字段
        allLogbooks: [...state.allLogbooks, action.payload] // 生成新数组并添加元素
      };
    // 这里还可以扩展其他case，比如处理加载、错误状态的Action
    default:
      return state;
  }
};

export default logbookReducer;

4. 结合POST请求执行Dispatch #

当Node.js服务器返回成功消息和新创建的Logbook对象后，在请求回调里调用dispatch，传入我们写的addLogbook Action即可。这里用axios举个例子：

import axios from 'axios';
import { addLogbook } from './actions';

// 发起POST请求的函数，假设你用了Redux的useDispatch钩子（或connect方法）
const createLogbook = async (logbookData, dispatch) => {
  try {
    const response = await axios.post('/api/logbooks', logbookData);
    // 服务器返回的新Logbook对象通常在response.data里，根据实际结构调整
    dispatch(addLogbook(response.data.newLogbook));
  } catch (error) {
    // 这里可以处理请求错误，比如dispatch一个错误Action
    console.error('创建Logbook失败:', error);
  }
};

关键注意点 #

• Immutable原则：绝对不能直接修改state.allLogbooks（比如用push方法），这样Redux无法检测到状态变化。必须用扩展运算符或concat方法生成新数组。
• 如果服务器返回的数据结构不同，记得调整response.data的取值路径，确保拿到正确的新Logbook对象。

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