TypeScript 与 Redux 容器的斗争

Question

我在弄清楚如何正确输入 Redux containers 时遇到了一些麻烦。

考虑一个可能如下所示的简单展示组件：

interface MyProps {
  name: string;
  selected: boolean;
  onSelect: (name: string) => void;
}
class MyComponent extends React.Component<MyProps, {}> { }

从这个组件的角度来看，所有的道具都是必需的。

现在我想编写一个容器，将所有这些道具拉出状态：

function mapStateToProps(state: MyState) {
  return {
    name: state.my.name,
    selected: state.my.selected
  };
}

function mapDispatchToProps(dispatch: IDispatch) {
  return {
    onSelect(name: string) {
      dispatch(mySelectAction(name));
    }
  };
}

const MyContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

这可行，但有一个大的打字问题：映射函数（mapStateToProps 和mapDispatchToProps）没有保护它们提供正确的数据来满足MyProps。这很容易出现错误、拼写错误和糟糕的重构。

我可以让映射函数返回类型MyProps：

function mapStateToProps(state: MyState): MyProps { }

function mapDispatchToProps(dispatch: IDispatch): MyProps { }

但是，除非我将所有 MyProp 属性设为可选，否则这不起作用，以便每个映射函数只能返回他们关心的部分。我不想让道具成为可选的，因为它们对于展示组件来说不是可选的。

另一种选择是拆分每个地图功能的道具并将它们组合为组件道具：

// MyComponent
interface MyStateProps {
  name: string;
  selected: boolean;
}

interface MyDispatchProps {
  onSelect: (name: string) => void;
}

type MyProps = MyStateProps & MyDispatchProps;

class MyComponent extends React.Component<MyProps, {}> { }

// MyContainer
function mapStateToProps(state: MyState): MyStateProps { }

function mapDispatchToProps(dispatch: IDispatch): MyDispatchProps { }

好的，这让我更接近我想要的，但它有点吵，它让我围绕容器的形状编写我的演示组件道具界面，我不喜欢。

现在出现了第二个问题。如果我想将容器放在另一个组件中怎么办：

<MyContainer />

这会产生 name、selected 和 onSelect 都丢失的编译错误...但这是故意的，因为容器正在连接到 Redux 并提供这些错误。所以这促使我回到让所有组件道具成为可选的，但我不喜欢这样，因为它们并不是真正的可选。

当MyContainer 有一些自己想要传递的道具时，事情会变得更糟：

<MyContainer section="somethng" />

现在我要做的是让section 是MyContainer 的必需道具，但不是MyComponent 的道具，而name、selected 和onSelect 是@ 的必需道具987654343@ 但可选或根本不是 MyContainer 的道具。我完全不知道该怎么表达。

对此的任何指导将不胜感激！

Answer 1

您在上一个示例中走在正确的轨道上。您还需要定义一个MyOwnProps 接口，并键入connect 函数。

使用这些类型：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react-redux/react-redux.d.ts，你可以做这样的事情

interface MyProps {
  section: string;
  name: string;
  selected: boolean;
  onSelect: (name: string) => void;
}

interface MyStateProps {
  name: string;
  selected: boolean;
}

interface MyDispatchProps {
  onSelect: (name: string) => void;
}

interface MyOwnProps {
  section: string;
}

class MyComponent extends React.Component<MyProps, {}> { }

function mapStateToProps(state: MyState): MyStateProps { }

function mapDispatchToProps(dispatch: IDispatch): MyDispatchProps { }

const MyContainer = connect<MyStateProps, MyDispatchProps, MyOwnProps>(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

这也可以让您在mapStateToProps 和mapDispatchToProps 中输入ownProps，例如

function mapStateToProps(state: MyState, ownProps: MyOwnProps): MyStateProps

你不需要为 MyProps 类型定义交集类型，只要你定义了 dispatch、state 和 ownProps 类型。这样，您可以将 MyProps 保留在自己的位置，并让容器或在没有容器的情况下使用组件的地方根据需要应用道具。我想这取决于您和您的用例 - 如果您定义 MyProps = MyStateProps & MyDispatchProps & MyOwnProps，它会绑定到一个特定的容器，该容器不太灵活（但不太冗长）。

作为一种解决方案，它非常冗长，但我认为没有任何方法可以绕过告诉 TypeScript 所需的不同道具将在不同的地方组装，connect 会将它们捆绑在一起。

另外，为了它的价值，为了简单起见，我通常使用可选的道具，所以我没有太多的经验可以分享使用这种方法。

Answer 2

我只使用Partial<MyProps>，其中Partial 是一个内置的TypeScript 类型，定义为：

type Partial<T> = {
    [P in keyof T]?: T[P];
}

它接受一个接口，并使其中的每个属性都是可选的。

这是我编写的演示/Redux 感知组件对的示例：

/components/ConnectionPane/ConnectionPane.tsx

export interface IConnectionPaneProps {
  connecting: boolean;
  connected: boolean;
  onConnect: (hostname: string, port: number) => void;
}

interface IState {
  hostname: string;
  port?: number;
}

export default class ConnectionPane extends React.Component<IConnectionPaneProps, IState> {
   ...
}

/containers/ConnectionPane/ConnectionPane.ts

import {connect} from 'react-redux';
import {connectionSelectors as selectors} from '../../../state/ducks';
import {connect as connectToTestEcho} from '../../../state/ducks/connection';
import {ConnectionPane, IConnectionPaneProps} from '../../components';

function mapStateToProps (state): Partial<IConnectionPaneProps> {
  return {
    connecting: selectors.isConnecting(state),
    connected: selectors.isConnected(state)
  };
}

function mapDispatchToProps (dispatch): Partial<IConnectionPaneProps> {
  return {
    onConnect: (hostname, port) => dispatch(connectToTestEcho(hostname, port))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ConnectionPane) as any;

展示组件道具是非可选的 - 完全符合展示的要求，与相应的“智能”组件没有任何关系。

同时，mapStateToProps 和 mapDispatchToProps 将允许我在每个函数中分配所需的演示道具的子集，同时将演示道具界面中未定义的任何道具标记为错误。

Answer 3

interface MyStateProps {
    name: string;
    selected: boolean;
}

interface MyDispatchProps {
    onSelect: (name: string) => void;
}

interface MyOwnProps {
    section: string;
}

// Intersection Types
type MyProps = MyStateProps & MyDispatchProps & MyOwnProps;


class MyComponent extends React.Component<MyProps, {}> { }

function mapStateToProps(state: MyState): MyStateProps { }

function mapDispatchToProps(dispatch: IDispatch): MyDispatchProps { }

const MyContainer = connect<MyStateProps, MyDispatchProps, MyOwnProps>(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

你可以使用一种叫做Intersection Types的东西 https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types