React-Redux 中实现数据更新操作的正确姿势

// actions/Actions.js
export const UpdateContact = (id) => { // 注意：这里只接收了 id
    return {
        type: 'UPDATE_CONTACT',
        payload: id // 有效载荷是联系人的 id
    }
}

// reducers/AppReducer.js
export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        // ... 其他 case
        case "UPDATE_CONTACT":
            const updatedContact = action.payload; // 这里期望 payload 是一个完整的联系人对象
            const updatedContacts = state.contacts.map((contact) => {
                if (contact.id === updatedContact.id) {
                    return updatedContact // 用新的联系人对象替换旧的
                }
                return contact
            })
            return updatedContacts // 注意：这里直接返回了 updatedContacts，这本身也是一个潜在问题，应返回新的状态对象
        // ... 其他 case
    }
}

// actions/Actions.js (修正后)
export const UpdateContact = (contact) => { // 现在接收的是一个完整的 contact 对象
    return {
        type: 'UPDATE_CONTACT',
        payload: contact // 有效载荷是完整的联系人对象
    }
}

// components/UpdateContactPage.jsx (修正后)
import React, { useState, useEffect } from 'react'; // 引入 useEffect
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useNavigate } from 'react-router-dom'; // 引入 useNavigate
import { UpdateContact } from '../redux/actions/Actions';

const UpdateContactPage = () => {
  const { id } = useParams();
  const contacts = useSelector(state => state.userReducer.contacts);
  const navigate = useNavigate(); // 用于导航

  // 确保在组件挂载时找到对应的联系人并初始化状态
  const initialContact = contacts.find((contact) => contact.id === id);

  // 如果找不到联系人，可以重定向或显示错误
  useEffect(() => {
    if (!initialContact) {
      navigate('/contacts'); // 或者显示错误信息
    }
  }, [initialContact, navigate]);

  // 使用 initialContact 初始化 user 状态
  const [user, setUser] = useState(initialContact || {
    id: '',
    userName: '',
    surname: '',
    image: ''
  });

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const dispatch = useDispatch();

  const updateContactForm = (e) => {
    e.preventDefault();
    dispatch(UpdateContact(user)); // 现在调度的是包含完整 user 对象的动作
    navigate('/contacts'); // 更新后导航回联系人列表页面
  };

  if (!initialContact) {
    return <div>Contact not found.</div>; // 或者加载指示器
  }

  return (
    <>
      <div className="container mt-5">
        <form onSubmit={updateContactForm}>
          <div className="mb-3">
            <input type="text" name='userName' className="form-control" placeholder='username' onChange={handleChange} value={user.userName} /> {/* 使用 value 绑定 */}
          </div>
          <div className="mb-3">
            <input type="text" name='image' className="form-control" placeholder='img' onChange={handleChange} value={user.image} /> {/* 使用 value 绑定 */}
          </div>
          <div className="mb-3">
            <input type="text" name='surname' className="form-control" placeholder='surname' onChange={handleChange} value={user.surname} /> {/* 使用 value 绑定 */}
          </div>
          <button type="submit" className="btn btn-primary">Update</button>
        </form>
      </div>
    </>
  );
};

export default UpdateContactPage;

// reducers/AppReducer.js (验证后，并修正了返回状态的方式)
export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        // ... 其他 case
        case "UPDATE_CONTACT":
            const updatedContact = action.payload; // 现在 action.payload 确实是完整的联系人对象
            const updatedContacts = state.contacts.map((contact) => {
                if (contact.id === updatedContact.id) {
                    return updatedContact; // 返回更新后的联系人对象
                }
                return contact;
            });
            return { // Reducer 必须返回一个新的状态对象
                ...state,
                contacts: updatedContacts
            };
        // ... 其他 case
    }
}