在React状态下使用带有流的嵌套对象

// 初始状态
const initialState = {
  user: {
    name: 'John',
    age: 25,
    address: {
      city: 'New York',
      country: 'USA'
    }
  }
};

// 动作类型
const UPDATE_USER_NAME = 'UPDATE_USER_NAME';

// 动作创建函数
const updateUserName = (name) => ({
  type: UPDATE_USER_NAME,
  payload: name
});

// 状态更新函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_USER_NAME:
      return {
        ...state,
        user: {
          ...state.user,
          name: action.payload
        }
      };
    default:
      return state;
  }
};

// 在组件中使用状态和动作
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  const handleNameChange = (e) => {
    dispatch(updateUserName(e.target.value));
  };

  return (
    <div>
      <input type="text" value={user.name} onChange={handleNameChange} />
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>City: {user.address.city}</p>
      <p>Country: {user.address.country}</p>
    </div>
  );
};