如何在react redux中调度一个动作onClick？

// actions.js

export const CLICK_BUTTON = 'CLICK_BUTTON';

export const clickButton = () => {
  return {
    type: CLICK_BUTTON,
    payload: 'Button clicked!'
  };
};

// reducer.js

import { CLICK_BUTTON } from './actions';

const initialState = {
  message: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CLICK_BUTTON:
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

// ButtonComponent.js

import React from 'react';
import { connect } from 'react-redux';
import { clickButton } from './actions';

const ButtonComponent = ({ message, clickButton }) => {
  return (
    <div>
      <button onClick={clickButton}>Click me</button>
      <p>{message}</p>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    message: state.message
  };
};

export default connect(mapStateToProps, { clickButton })(ButtonComponent);

// App.js

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import ButtonComponent from './ButtonComponent';

const store = createStore(reducer);

const App = () => {
  return (
    <Provider store={store}>
      <ButtonComponent />
    </Provider>
  );
};

export default App;