React-Redux 数据更新操作指南：解决Payload不匹配问题

import React, { useState, useEffect } from 'react'
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 navigate = useNavigate(); // 使用useNavigate进行跳转

  const contacts = useSelector(state => state.userReducer.contacts)
  // 确保id是字符串，因为useParams返回的是字符串
  const updatedBlog = contacts.find((contact) => contact.id === id)

  // 初始化state时，如果updatedBlog不存在，需要提供默认值或处理
  const [user, setUser] = useState({
    id: updatedBlog ? updatedBlog.id : '',
    userName: updatedBlog ? updatedBlog.userName : '',
    surname: updatedBlog ? updatedBlog.surname : '',
    image: updatedBlog ? updatedBlog.image : ''
  })

  // 当updatedBlog变化时，更新user state
  useEffect(() => {
    if (updatedBlog) {
      setUser({
        id: updatedBlog.id,
        userName: updatedBlog.userName,
        surname: updatedBlog.surname,
        image: updatedBlog.image
      });
    }
  }, [updatedBlog]);


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

  const dispatch = useDispatch();

  const updateContactForm = (e) => {
    e.preventDefault()
    // 问题出在这里：dispatch(UpdateContact(user)) 被注释，且UpdateContact的定义有问题
    // console.log(user); // 此时user对象包含所有更新后的数据
    dispatch(UpdateContact(user)); // 正确的调用方式
    navigate('/'); // 更新后通常会跳转回列表页
  }

  if (!updatedBlog) {
    return <div className="container mt-5">联系人未找到！</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而非defaultValue */}
          </div>
          <div className="mb-3">
            <input type="text" name='image' className="form-control" placeholder='img' onChange={handleChange} value={user.image} />
          </div>
          <div className="mb-3">
            <input type="text" name='surname' className="form-control" placeholder='surname' onChange={handleChange} value={user.surname} />
          </div>
          <button type="submit" className="btn btn-primary">Update</button>
        </form>
      </div>
    </>
  )
}

export default UpdateContactPage

// actions.js
export const UpdateContact = (id) => { // ❌ 错误：这里只接收了id
    return {
        type: 'UPDATE_CONTACT',
        payload: id // ❌ 错误：Payload也只是id
    }
}

// reducer.js
export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        // ... 其他 cases
        case "UPDATE_CONTACT":
            const updatedContact = action.payload; // ✅ 正确：Reducer期望一个完整的contact对象
            const updatedContacts = state.contacts.map((contact) => {
                if (contact.id === updatedContact.id) {
                    return updatedContact // ✅ 正确：用新的contact对象替换旧的
                }
                return contact
            })
            // ❌ 错误：Reducer返回的不是完整的state对象
            return updatedContacts; // 应该返回 { ...state, contacts: updatedContacts }
        // ... 其他 cases
    }
}

// actions/Actions.js
export const UpdateContact = (user) => { // 接收完整的user对象
    return {
        type: 'UPDATE_CONTACT',
        payload: user // 将完整的user对象作为payload
    }
}

// reducers/AppReducer.js
export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        // ... 其他 cases
        case "UPDATE_CONTACT":
            const updatedContact = action.payload; // 此时action.payload就是完整的user对象
            const updatedContacts = state.contacts.map((contact) => {
                // 注意：如果id是数字，而payload中的id是字符串，需要转换
                // 或者确保两者类型一致，例如都为字符串
                if (String(contact.id) === String(updatedContact.id)) {
                    return updatedContact; // 返回新的联系人对象
                }
                return contact;
            });
            return {
                ...state, // 返回一个新的state对象
                contacts: updatedContacts // 更新contacts数组
            };
        // ... 其他 cases
        default:
            return state;
    }
}

// components/UpdateContactPage.jsx
const updateContactForm = (e) => {
    e.preventDefault();
    dispatch(UpdateContact(user)); // 将完整的user对象传递给dispatch
    navigate('/'); // 更新成功后导航回主页
}

export const AddContact = (user) => {
    return {
        type: 'ADD_CONTACT',
        payload: user
    }
}

export const DeleteContact = (id) => {
    return {
        type: 'REMOVE_CONTACT',
        payload: id
    }
}

// 修正后的 UpdateContact Action Creator
export const UpdateContact = (user) => { // 接收完整的user对象
    return {
        type: 'UPDATE_CONTACT',
        payload: user // 将完整的user对象作为payload
    }
}

export const RemoveAll = () => {
    return {
        type: 'REMOVE_ALL_CONTACTS',
    }
}

const initialState = {
    contacts: localStorage.getItem('Contacts') ? JSON.parse(localStorage.getItem('Contacts')) : []
}

export const AppReducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_CONTACT":
            // 确保id是唯一的，可以考虑使用UUID或其他生成方式
            const newContactWithId = { ...action.payload, id: action.payload.id || Date.now().toString() };
            const updatedAddContacts = [...state.contacts, newContactWithId];
            localStorage.setItem('Contacts', JSON.stringify(updatedAddContacts)); // 持久化
            return {
                ...state,
                contacts: updatedAddContacts
            }
        case "UPDATE_CONTACT":
            const updatedContactPayload = action.payload; // 此时action.payload就是完整的user对象
            const updatedContacts = state.contacts.map((contact) => {
                if (String(contact.id) === String(updatedContactPayload.id)) { // 确保id类型一致性
                    return updatedContactPayload; // 返回新的联系人对象
                }
                return contact;
            });
            localStorage.setItem('Contacts', JSON.stringify(updatedContacts)); // 持久化
            return {
                ...state, // 返回一个新的state对象
                contacts: updatedContacts // 更新contacts数组
            };
        case "REMOVE_CONTACT":
            const filteredContacts = state.contacts.filter((item) => String(item.id) !== String(action.payload));
            localStorage.setItem('Contacts', JSON.stringify(filteredContacts)); // 持久化
            return {
                ...state,
                contacts: filteredContacts
            }
        case "REMOVE_ALL_CONTACTS":
            localStorage.removeItem('Contacts'); // 清除localStorage
            return {
                ...state,
                contacts: []
            }
        default:
            return state;
    }
}