Не удается отправить действие машинописного текста для компонента на основе класса

Я пытаюсь использовать этот шаблон для моего проекта реактивного машинописного текста. Я не могу настроить правильный тип действий. Это было легко с JavaScript. Но я новичок в TypeScript. Я хочу знать, почему мой код не работает. Также, пожалуйста, предложите лучший способ решить эту проблему.

Панель инструментов.tsx

interface IAction{
  type: string,
  payload: any,
}

interface IProps {
  // dashboard: DashboardState;
  dashboard: any;
  // Actions
  changeUserName: IAction;
}
interface IState {}

class Dashboard extends React.Component<IProps, IState> {
  componentDidMount(){
    console.info("____FOCUS____");
    console.info(this.props);
    this.props.changeUserName("NewName");
    console.info("____FOCUS____");
    // this.props.changeUserName('New Name');
  }
  render() {
    return (
      <>
        <Helmet>
          <title>Dashboard</title>
          <meta name = "description" content = "Description of Dashboard" />
        </Helmet>
        <DashboardComponent username = {'somevalue'} />
        {/* <Div>{t('')}</Div> */}
      </>
    );
  }
}


const mapStateToProps = (state: any, ownProps: any) => ({
  dashbaord: selectDashboard(state),
});

const mapDispatchToProps = (dispatch: any, ownProps: any) => ({
  ...bindActionCreators({
    ...actions,
  }, dispatch),
});

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({key: sliceKey, reducer: dashboardReducer});
const withSaga = injectSaga({key: sliceKey, saga: dashboardSaga});

export default compose(
  withReducer,
  withConnect,
  withSaga,
)(Dashboard);

Типы

Типы, которые я создаю, такие же, как и в документах.

/* --- STATE --- */
export interface DashboardState {
  username: string;
}

export type ContainerState = DashboardState;

Кусочек

Это фрагмент, который я создаю. Это так, как описано в документах.

export const initialState: ContainerState = {
  username: 'Initial Username',
};

const dashboardSlice = createSlice({
  name: 'dashboard',
  initialState,
  reducers: {
    changeUserName(state, action: PayloadAction<string>) {
      state.username = action.payload;
    },
  },
});

export const { actions, reducer, name: sliceKey } = dashboardSlice;