TypeScript与Redux容器作斗争

Question

我在弄清楚如何正确键入Redux容器时遇到一些麻烦。

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

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道具都设为可选，否则这将无法工作，以便每个映射函数只能返回他们关心的部分。我不想使道具成为可选项，因为它们对于呈现组件不是可选的。

另一种选择是为每个map函数拆分道具，并将它们组合为组件道具：

// 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 { }

好的，这使我离想要的东西越来越近，但是它有点嘈杂，使我无法按照容器的形状编写我的演示性组件prop接口。

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

<MyContainer />

这使编译错误是name，selected和onSelect无一不缺......但是，由于容器连接到终极版，并提供那些故意的。因此，这促使我将所有组件道具都设置为可选，但我不喜欢这样做，因为它们并不是真正的可选。

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

<MyContainer section="somethng" />

现在，我想要做的是有section一个必需的道具MyContainer，但不是一个道具MyComponent，和name，selected以及onSelect需要的道具MyComponent，但可选的，或者不是在所有的道具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);

这也让你输入ownProps的mapStateToProps和mapDispatchToProps，如

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

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

作为解决方案，它非常冗长，但是我认为没有办法告诉TypeScript所需的道具的不同部分将在不同的地方组装connect并将它们绑在一起。

另外，为了简单起见，为了简单起见，我通常会带可选的道具，因此在使用这种方法时，我没有太多经验可以分享。