如何在redux框架选项中显示上传或默认徽标

// 1. 安装redux和react-redux库
// npm install redux react-redux

// 2. 创建Redux store
import { createStore } from 'redux';

// 定义reducer函数
function logoReducer(state = { logoUrl: '' }, action) {
  switch (action.type) {
    case 'UPLOAD_LOGO':
      return { ...state, logoUrl: action.payload };
    default:
      return state;
  }
}

// 创建store
const store = createStore(logoReducer);

// 3. 创建React组件
import React from 'react';
import { connect } from 'react-redux';

class LogoComponent extends React.Component {
  render() {
    const { logoUrl } = this.props;
    return (
      <div>
        {logoUrl ? (
          <img src={logoUrl} alt="Logo" />
        ) : (
          <p>No logo uploaded</p>
        )}
        <button onClick={this.handleUpload}>Upload Logo</button>
      </div>
    );
  }

  handleUpload = () => {
    // 处理上传逻辑，可以使用第三方上传组件或自定义逻辑
    // 上传成功后，更新Redux store中徽标的状态
    const logoUrl = 'https://example.com/logo.png'; // 假设上传成功后返回的URL
    this.props.uploadLogo(logoUrl);
  }
}

// 4. 连接Redux store
const mapStateToProps = state => {
  return {
    logoUrl: state.logoUrl
  };
};

const mapDispatchToProps = dispatch => {
  return {
    uploadLogo: (logoUrl) => dispatch({ type: 'UPLOAD_LOGO', payload: logoUrl })
  };
};

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