如何将标题栏配置为redux状态，使标题图标可以动态更改？

const initialState = {
  title: 'My App',
  icon: 'default.png'
};

const reducer = (state = initialState, action) => {
  // 处理不同的action类型
  switch (action.type) {
    case 'CHANGE_TITLE':
      return {
        ...state,
        title: action.payload
      };
    case 'CHANGE_ICON':
      return {
        ...state,
        icon: action.payload
      };
    default:
      return state;
  }
};

const changeTitle = (newTitle) => {
  return {
    type: 'CHANGE_TITLE',
    payload: newTitle
  };
};

const changeIcon = (newIcon) => {
  return {
    type: 'CHANGE_ICON',
    payload: newIcon
  };
};

import { connect } from 'react-redux';
import { changeTitle, changeIcon } from './actions';

class TitleBar extends React.Component {
  // 组件的代码

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <img src={this.props.icon} alt="Title Icon" />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    title: state.title,
    icon: state.icon
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    changeTitle: (newTitle) => dispatch(changeTitle(newTitle)),
    changeIcon: (newIcon) => dispatch(changeIcon(newIcon))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TitleBar);

class App extends React.Component {
  // 组件的代码

  handleClick = () => {
    this.props.changeTitle('New Title');
    this.props.changeIcon('new.png');
  };

  render() {
    return (
      <div>
        <TitleBar />
        <button onClick={this.handleClick}>Change Title</button>
      </div>
    );
  }
}