javascript - 将 own-props 命名空间与 state-props 分开是一种有用的模式吗？

Question

以下命名空间状态提供的 Prop 和父级提供的 Prop 的模式是否有用？

interface OwnProps {
  //The type for the props provided by the parent component
}

function mapDispatch(dispatch: Dispatch<any>) {
  return {dispatch};
}

function mapState(state: RootState, ownProps: OwnProps) {
  return {
    o: {...ownProps},                   // ownProps are namespaced onto o.
    s: {                                 // stateProps are namespaced onto s.
      apiInReach: state.dev.apiInReach,
    }
  };
}

 //// ...

export default connect(
  mapState,
  mapDispatch
)(Dev);

这似乎是一个很好的做法，但我还没有看到有人使用它。

请注意 ownProps 如何在 mapState() 中将命名空间命名为“o”，而 stateProps 如何将命名空间命名为“s”。

Answer 1

我认为这没有问题。

顺便说一句，我们可以通过在下面的方法中传递 Type 来使其清晰可见

interface Props extends WithStyles<typeof styles> {
  classes: any,
  parentProps1: TypeOfParentProps1,
  parentProps2: TypeOfParentProps2,
  ...
  stateProps1: Store['stateName1'], // Use `[]` to distinguish from above
  stateProps2: Store['stateName2'],
  ...
  actionDispatched: (payload: TypeOfActionPayload) => void,
  ...

由于您必须在其他地方定义了 redux store 类型，因此调用它与正常方式一样好。

// Redux store defination
export interface Store {
  stateName1: TypeOfStateProps1,
  stateName2: TypeOfStateProps2,
  ...