Reactjs 如何在按下按钮时呈现更新存储的值？

我想弄清楚react和redux是如何工作的。按下这三个按钮后，我如何获得存储的值。我在控制台上获得输出，但我希望它显示在屏幕上

import React，{Component}来自'React'；
从“redux”导入{createStore}；
类存储扩展组件{
render（）{
const reducer=（状态=0，操作）=>
{
如果（action.type==“更新奖金”）
{
返回状态+操作.payload
}
如果（action.type==“LEVEL_COMPLETED”）
{
返回状态+操作.payload
}
如果（action.type==“失去生命”）
{
返回状态-action.payload
}
返回状态；
}
const store=createStore（reducer，0）；
store.subscribe（（）=>{
log（store.getState（））；
})
const handleUpdateBonus=（）=>
{
调度（{类型：“更新奖金”，有效负载：100}）；
返回（{store.getState（）}）
}
const handleLevelCompleted=（）=>
{
调度（{type:“LEVEL_COMPLETED”，有效载荷：500}）；
返回（{store.getState（）}）
}
const handleLifeLost=（）=>
{
存储调度（{类型：“生命损失”，有效载荷：250}）；
返回（{store.getState（）}）
}
返回（{store.getState（）}Update BonusLevel CompletedLife Lost）；
}
}
导出默认存储；

这里的问题是store.getState（）将在渲染时进行一次计算。由于状态最初为零，因此它将始终显示为零。您需要的是组件在每次状态更改时重新渲染

要实现这一点，您需要将组件连接到存储。我想再次阅读如何做到这一点。

我知道连接（组件）（存储），但我不知道如何在这里使用它。我为此制作了一个单独的组件，我试图连接它，但失败了。我需要一个简单的示例代码，以便我能够以某种方式理解这个概念。