无法为基于 class 的组件分派打字稿操作

Question

我正在尝试为我的 React 打字稿项目使用 this 样板。我无法配置正确类型的操作。使用 JavaScript 很容易。但我是 TypeScript 的新手。我想知道为什么我的代码不起作用。也请提出解决这个问题的最佳方法。

Dashboard.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.log("____FOCUS____");
    console.log(this.props);
    this.props.changeUserName("NewName");
    console.log("____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;

Answer 1

问题

我没有以正确的方式创建界面。基于 class 的组件的调度方法与之前相同。唯一的问题是现在正确的接口。

解决方案代码

Dashboard.tsx

interface IProps {
  initChangeUserName: Function;
  changeUserName: Function;
}

interface IState {}

class Dashboard extends React.Component<IProps, IState> {
  render() {
    return (
      <>
        <Helmet>
          <title>Dashboard</title>
          <meta name="description" content="Description of Dashboard" />
        </Helmet>
        <DashboardComponent 
        username={'somevalue'}
        initChangeUserName={this.props.initChangeUserName}
        />
      </>
    );
  }
}

const mapStateToProps = (state: any, ownProps: any) => ({
  dashboard: 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);

DashboardComponent.tsx


// ....
// This was a functional component
<UserNameForm initChangeUserName={props.initChangeUserName} />
// ....

UserNameForm.tsx

// ....
this.props.initChangeUserName(this.state.username);
// ....

无法为基于 class 的组件分派打字稿操作

Can't dispatch typescript action for class based component

stateful

typescript

reactjs

redux-saga

react-redux