javascript - 对自己的 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中，如何将stateProps命名为“ o”，而将mapState()命名为“ s”。

最佳答案

我认为那没问题。

顺便说一句，我们可以通过以下方法传递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存储类型，因此调用它与正常方法一样好。

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