Redux对象未在组件属性中更新

import { connect } from 'react-redux';

class MyComponent extends React.Component {
  // ...
}

const mapStateToProps = (state) => ({
  myData: state.myData,
});

export default connect(mapStateToProps)(MyComponent);

import { useSelector, useDispatch } from 'react-redux';

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

  // ...
}

const initialState = {
  myData: null,
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return {
        ...state,
        myData: action.payload,
      };
    default:
      return state;
  }
}

const updateData = (data) => ({
  type: 'UPDATE_DATA',
  payload: data,
});

// 在组件中分发 action
dispatch(updateData(newData));

// actions.js
export const updateData = (data) => ({
  type: 'UPDATE_DATA',
  payload: data,
});

// reducer.js
const initialState = {
  myData: null,
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      return {
        ...state,
        myData: action.payload,
      };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { rootReducer } from './reducer';

export const store = createStore(rootReducer);

// MyComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateData } from './actions';

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

  const handleUpdate = () => {
    dispatch(updateData('New Data'));
  };

  return (
    <div>
      <p>{myData}</p>
      <button onClick={handleUpdate}>Update Data</button>
    </div>
  );
}

export default MyComponent;