Reactjs 无法在redux中分派函数调用

我是redux新手，在执行下面的示例时，我无法按预期渲染输出

App.js

 import React from 'react';
    import { Provider } from 'react-redux';
    import store from './store';
    import CakeContainer from './CakeContainer'
    
    function App(props) {
      return (
        <Provider store={store}>
         <CakeContainer />
        </Provider>
      );
    }
    
    export default App;

CakeContainer.js

import React from 'react';
import { connect } from 'react-redux';

function CakeContainer(props) {
    return <div>
            {props.buycake}
            <h1>Store cakes:{props.cake}</h1>
            </div> ;
}
const mapStateToProps= state =>{
    return {
        cake: state.cake
    }
}
const mapDispatchToProps= dispatch =>{
    return {
        buycake: () => dispatch({type:'BUY_CAKE'} )
    }
}
export default connect(mapStateToProps,mapDispatchToProps) (CakeContainer);

从“React”导入React；
从'react redux'导入{connect}；
功能容器（道具）{
返回
{props.buycake}
商店蛋糕：{props.cake}
;
}
常量mapStateToProps=状态=>{
返回{
蛋糕：国家蛋糕
}
}
const mapDispatchToProps=调度=>{
返回{
buycake:（）=>分派（{类型：'BUY_CAKE'}）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（CakeContainer）；

控制台显示警告如下：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它

有谁能帮我解释一下为什么这里不呈现buycake（），输出总是cake:10而不是cake:5

{props.buycake}

此行试图在屏幕上呈现函数。这是不可能的，并且会导致您看到的错误。你可能想调用这个函数，但我不确定什么时候。假设您希望在单击按钮时执行此操作，它可能如下所示：

function CakeContainer(props) {
  return (
    <div>
      <button onClick={props.buycake}>Click Me</button>
      <h1>Store cakes:{props.cake}</h1>
    </div>
  );
}

功能容器（道具）{
返回(
点击我
商店蛋糕：{props.cake}
);
}

用例“BUY_CAKE”：不是这个例子“BUY_CAKE”：谢谢……它起作用了，我以为它会在页面加载期间调用{props.buyCake}。

function CakeContainer(props) {
  return (
    <div>
      <button onClick={props.buycake}>Click Me</button>
      <h1>Store cakes:{props.cake}</h1>
    </div>
  );
}