在typescript中使用 react-redux connect

IT技术 javascript reactjs typescript redux react-redux
2021-05-03 23:42:56

我尝试使用 redux 和 react-router-dom 在typescript中构建一个 react 应用程序。当我将 redux 添加到我的应用程序时，我遇到了输入问题。因此，我创建了以下最小示例，其中只有一页test-page：

应用程序.jsx

import * as React from 'react';
import { Route, Redirect } from 'react-router-dom'
import Test from './containers/test-page'
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="ui container" id="main">
        <Route exact path="/" render={() => <Redirect to="/test" />}/>
        <Route exact path="/test" component={Test} />
      </div>
    );
  }
}

export default App;

测试页的容器如下所示。它会在调用connect 时产生输入错误。

容器/测试页/index.tsx

import { Dispatch } from 'redux'
import { connect } from 'react-redux'
import TestPage from './test-page'

function mapDispatchToProps(dispatch: Dispatch<any>) {
  return dispatch({ type: 'ALERT_USER' });
}

function mapStateToProps(state: any) {
  return { label: 'my test label' }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TestPage)

容器使用以下react组件，它在生产中应该为路由器呈现页面。它产生两个错误，见下文。

容器/测试页面/测试页面.tsx

import * as React from 'react';

export namespace Test {
  export interface Props {
    alert: () => void;
    label: string;
  }

  export interface State {
  }
}

export default class TestPage extends React.Component {

  constructor(props?: Test.Props, state?: Test.State, context?: any) {
    super(props, context);
  }

  sendAlert = () => {
      this.props.alert()
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <button onClick={this.sendAlert}>{this.props.label}</button>
      </div>
    );
  }
}

错误信息：

proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
(20,18): error TS2339: Property 'alert' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
(27,54): error TS2339: Property 'label' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

proxyConsole.js:54 ./src/containers/test-page/index.tsx
(16,3): error TS2345: Argument of type 'typeof TestPage' is not assignable to parameter of type 'ComponentType<{ label: string; } & { type: string; }>'.
  Type 'typeof TestPage' is not assignable to type 'StatelessComponent<{ label: string; } & { type: string; }>'.
    Type 'typeof TestPage' provides no match for the signature '(props: { label: string; } & { type: string; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

我尝试遵循不同的指南并查找示例实现，但无法解决这些问题。我不明白typescript编译器的错误消息：

  • 为什么this.props我定义的属性不存在？
  • 在连接中究竟什么是不可分配的？
3个回答

我注意到的几件事：

1）据我在示例中看到以及props在 TypeScript 中使用时，您的调用React.Component需要指定Props为类型参数，如下所示：

export default class TestPage extends React.Component<Test.Props, Test.State>{

    constructor(props: Test.Props) {
        super(props);
    }

}

您可以指定您的组件不接受props或state通过传递空接口，即：

export default class TestPage extends React.Component<{}, {}>{

    // constructor becomes 'useless' at this point and is not needed
    constructor() {
        super();
    }

}

我认为这解释了为什么您的调用签名不匹配以及为什么没有可见的属性this.props- TS 看到了一个接口，ReadOnly{}因为它没有传入的类型参数。

2) 你的mapStateToProps函数看起来不太对劲。mapStateToProps接受两个参数，state（引用您的 Redux store）和ownProps作为可选的第二个参数，它指的是props从父级传递下来的。所以mapStateToProps应该是这样的：

function mapStateToProps(state: any, ownProps: { label: string }) {

    return {
        label: ownProps.label
    };
}

这就是我为什么猜测connect是抛出一个错误-它只是在这里你做出终极版应该如何处理合并断言的地方props，从即将到来的store和props从父到来。让我知道这是否有效。

这不起作用，因为 connect 是一个通用函数。这意味着您需要提供额外的类型参数。

connect<StateProps, DispatchProps>({
    mapStateToProps,
    mapDispatchToProps,
})(SomeComponent);

您可以在此处找到打字实现。你需要知道的一切都在那里 C:

Type Script 应用程序的工作语法变体是：

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

    interface ComponentProps {
    // Your properties here
    }

    interface ComponentState {
    // Your properties here
    }

    interface MapStateToPropsTypes {
    // Your properties here
    }

    interface MapDispatchToPropsTypes {
    // Your properties here
    }

    class MyComponentName extends React.Component<ComponentProps, ComponentState> {
        constructor(props: ComponentProps) {
            super(props);
        }
    }

    export default connect<MapStateToPropsTypes, MapDispatchToPropsTypes>(
      mapStateToProps,
      mapDispatchToProps)
    (MyComponentName)
其它你可能感兴趣的问题
上一篇React 和 Grunt - Envify NODE_ENV='production' 和 UglifyJS 下一篇较慢的外周速度仍然有意义吗？