动作创建者无法处理onClick事件

Question

当我在onClick事件上运行动作创建者时，它不会调度该动作。

这是我的动作：

const removePalette = ({id = ''} = {}) => ({
    type: ' REMOVE_PALETTE',
    id
})

这是我的减速器：

const paletteDefault = [{
    Name: "Material UI",
    myArray: [],
    _id: uuid()
}, {
    Name: "Splash UI",
    myArray: [],
    _id: uuid()
}]

const PaletteReducers = (state = paletteDefault, action) => {
    switch(action.type) {
        case 'ADD_PALETTE':
            return [...state, action.palette]
            case 'REMOVE_PALETTE':
                return state.filter(x => x._id !== action.id)
        default:
            return state
    }
}

export default PaletteReducers

我的商店

import {createStore, combineReducers} from 'redux'
import PaletteReducers from '../reducers/PaletteCard'
import ColorReducers from '../reducers/Colors'
import DisplayReducers from '../reducers/DisplayColors'
import RandomReducers from '../reducers/RandomColor'

const ConfigureStore = () => {
    const store = createStore (
        combineReducers ({
            Colors: ColorReducers,
            Palette: PaletteReducers,
            Display: DisplayReducers,
            RandomColor : RandomReducers
        })
    )

    return store
}

export default ConfigureStore

我要调度操作的地方

import React, {Component} from 'react'
import { connect } from 'react-redux'
import {Card, Grid, Icon, Image, Button} from 'semantic-ui-react'
import {Link} from 'react-router-dom'
import {removePalette} from './actions/PaletteCard'


class CardToDisplay extends Component {
    render() {
        console.log(this.props)
        let cardName = this.props.Name.replace(/\s+/g, '-').toLowerCase()
        return (
            <Card>
                <Image src = 'https://images.pexels.com/photos/1212406/pexels-photo-1212406.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' wrapped ui={false}/>
                <Card.Content>
                <Grid>
                <Grid.Column floated = 'left'>
                <Card.Header as = {Link} to = {`/palette/${cardName}`}>{this.props.Name}</Card.Header>
                </Grid.Column>
                <Grid.Column floated = 'right'>
                <Icon name = 'pencil' />
                <Icon name = 'trash' onClick = {() => this.props.dispatch(removePalette({id: this.props.id}))}/>
                </Grid.Column>
                </Grid>
                </Card.Content>
                </Card>
        )
    }
}


const PaletteCard = connect()(CardToDisplay)

export default PaletteCard

当我使用this.props.dispatch（removePalette（{id：this.props.id}））} />时，它不起作用，也不会显示任何错误。

出什么问题了？