无法将redux存储连接到语义ui调光器组件

npm install react-redux

// 在redux存储中定义初始状态和动作类型
const initialState = {
  brightness: 0, // 亮度
};

const CHANGE_BRIGHTNESS = 'CHANGE_BRIGHTNESS'; // 改变亮度的动作类型

// 创建reducer函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_BRIGHTNESS:
      return {
        ...state,
        brightness: action.payload,
      };
    default:
      return state;
  }
};

// 创建Redux存储
const store = createStore(reducer);

import { connect } from 'react-redux';

// 调光器组件
const Dimmer = ({ brightness, changeBrightness }) => {
  return (
    <SemanticDimmer
      active={true}
      onClick={() => changeBrightness(brightness + 1)} // 点击调光器时改变亮度
    />
  );
};

// 映射Redux存储的状态到组件的属性
const mapStateToProps = (state) => {
  return {
    brightness: state.brightness,
  };
};

// 映射Redux存储的动作到组件的属性
const mapDispatchToProps = (dispatch) => {
  return {
    changeBrightness: (brightness) =>
      dispatch({ type: CHANGE_BRIGHTNESS, payload: brightness }),
  };
};

// 使用connect函数连接Redux存储和组件
const ConnectedDimmer = connect(mapStateToProps, mapDispatchToProps)(Dimmer);

const App = () => {
  return (
    <div>
      {/* 其他应用组件 */}
      <ConnectedDimmer /> {/* 连接后的调光器组件 */}
      {/* 其他应用组件 */}
    </div>
  );
};