使用 TypeScript 和 React-Redux 时推断映射的 props [英] Inferring mapped props when using TypeScript and React-Redux

问题描述

我找到了一种在使用 react-redux 中的 mapStateToProps 时获得类型安全的方法:作为 documented 你可以定义一个接口并用你的接口参数化React.Component.

I found a way to get type safety when using mapStateToProps from react-redux: as documented you can define an interface and parameterize React.Component<T> with your interface.

然而，当我定义 mapStateToProps 时，我已经定义了一个函数，可以推断结果对象的属性类型.例如，

However, when I am defining mapStateToProps, I'm already defining a function where the types of the properties of the resulting object can be inferred. Eg,

function mapStateToProps(state: MyState) {
    return {
        counter: state.counter
    };
}

在这里，可以推断道具 counter 与 state.counter 的类型相同.但我仍然必须有如下样板代码:

Here, the prop counter can be inferred to be the same type as state.counter. But I still have to have boilerplate code like the following:

interface AppProps {
    counter: number;
}


class App extends React.Component<AppProps> { ... }

export default connect(mapStateToProps)(App);

那么问题是，有没有什么方法可以构造代码，这样我就可以避免将 counter 的类型写两次?或者为了避免参数化 React.Component 的类型——即使我可以从 mapStateToProps 函数的显式提示的结果类型中推断出组件的 props，会更可取.我想知道上面的重复是否确实是使用 React-Redux 编写类型化组件的正常方式.

So the question is, is there any way to structure the code so that I can avoid writing the type of counter twice? Or to avoid parameterizing the type of React.Component -- even if I could have the props of the component inferred from an explicitly-hinted result type of the mapStateToProps function, that would be preferable. I am wondering if the duplication above is indeed the normal way to write typed components using React-Redux.

推荐答案

是的.有一种巧妙的技术可以根据 mapState 和 mapDispatch 推断 connect 将传递给您的组件的组合道具的类型.

Yes. There's a neat technique for inferring the type of the combined props that connect will pass to your component based on mapState and mapDispatch.

在 @types/react-redux@7.1.2 中有一个新的 ConnectedProps 类型可用.你可以这样使用它:

There is a new ConnectedProps<T> type that is available in @types/react-redux@7.1.2. You can use it like this:

function mapStateToProps(state: MyState) {
    return {
        counter: state.counter
    };
}

const mapDispatch = {increment};

// Do the first half of the `connect()` call separately, 
// before declaring the component
const connector = connect(mapState, mapDispatch);

// Extract "the type of the props passed down by connect"
type PropsFromRedux = ConnectedProps<typeof connector>
// should be: {counter: number, increment: () => {type: "INCREMENT"}}, etc

// define combined props
type MyComponentProps = PropsFromRedux & PropsFromParent;

// Declare the component with the right props type
class MyComponent extends React.Component<MyComponentProps> {}

// Finish the connect call
export default connector(MyComponent)

请注意，如果 mapDispatch 是一个对象，这会正确推断出包含在 mapDispatch 中的 thunk 动作创建者的类型，而 typeof mapDispatch 则不是.

Note that this correctly infers the type of thunk action creators included in mapDispatch if it's an object, whereas typeof mapDispatch does not.

我们很快就会将此作为推荐方法添加到官方 React-Redux 文档中.

We will add this to the official React-Redux docs as a recommended approach soon.

更多详情:

• 要点:ConnectedProps - Redux 缺少的 TS 助手
• 使用 React+Redux 的实用 TypeScript
• DefinitelyTyped #31227:连接组件推断
• DefinitelyTyped PR #37300:添加 ConnectedProps 类型

这篇关于使用 TypeScript 和 React-Redux 时推断映射的 props的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！