Question

我试图了解重新选择方法createStructuredSelector在Typescript中的工作方式。我经常看到这种模式：

export interface SomeProps {
   readonly property1: string;
   readonly property2: boolean;
   readonly property3: number;
}

export interface SomeOwnProps {
   readonly property3: number;
}

export const someSelector = createStructuredSelector<
    SomeState,
    SomeOwnProps,
    SomeProps
>({
   property1: property1Selector,
   property2: property2Selector,
   property3: (_, props) => props.property3
});

我不明白尖括号内类型的目的。我认为SomeState是Redux存储状态，SomeOwnProps是父组件传递的道具，SomeProps是该组件使用的所有道具。但是SomeOwnProps和SomeProps有什么区别，为什么同时需要两者？您怎么可能不仅仅使用SomeProps，因为它还包含SomeOwnProps中定义的属性？谢谢！

Answer 1

Public Sub ResizeForm(ObjForm As Form, DesignerHeight As Integer, DesignerWidth As Integer) '#Region "Code for Resizing and Font Change According to Resolution" 'Specify Here the Resolution Y component in which this form is designed 'For Example if the Form is Designed at 800 * 600 Resolution then DesignerHeight=600 Dim i_StandardHeight As Integer = DesignerHeight 'Specify Here the Resolution X component in which this form is designed 'For Example if the Form is Designed at 800 * 600 Resolution then DesignerWidth=800 Dim i_StandardWidth As Integer = DesignerWidth Dim i_PresentHeight As Integer = Screen.PrimaryScreen.Bounds.Height 'Present Resolution Height Dim i_PresentWidth As Integer = Screen.PrimaryScreen.Bounds.Width 'Presnet Resolution Width f_HeightRatio = CSng(CSng(i_PresentHeight) / CSng(i_StandardHeight)) f_WidthRatio = CSng(CSng(i_PresentWidth) / CSng(i_StandardWidth)) ObjForm.AutoScaleMode = AutoScaleMode.None 'Make the Autoscale Mode=None ObjForm.Scale(New SizeF(f_WidthRatio, f_HeightRatio)) For Each c As Control In ObjForm.Controls If c.HasChildren Then ResizeControlStore(c) Else c.Font = New Font(c.Font.FontFamily, c.Font.Size * f_HeightRatio, c.Font.Style, c.Font.Unit, CByte(0)) End If Next ObjForm.Font = New Font(ObjForm.Font.FontFamily, ObjForm.Font.Size * f_HeightRatio, ObjForm.Font.Style, ObjForm.Font.Unit, CByte(0)) End Sub有两种变体-一种采用组件自己的道具，第二种不采用。如果您所需的选择不取决于道具，则选择道具会更容易。

考虑一下这个人为的例子：

createStructuredSelector

当您的选择不取决于道具时：

/**
 * Data source (Redux store or a single reducer).
 */
interface State {
  readonly property1: string;
  readonly property2: boolean;
  readonly property3: number;
}

/**
 * Your component's OwnProps.
 */
interface OwnProps {
  index: 1 | 2 | 3;
}

/**
 * The interface you want to create.
 */
interface DesiredSelection {
  someString: string;
  someNumber: number;
};

您的选择确实取决于道具：

const mySelector = createStructuredSelector<State, DesiredSelection>({
  someString: state => state.property1,
  someNumber: state => state.property3
});

const mySelectorBasedOnProps = createStructuredSelector<State, OwnProps, DesiredSelection>({ someString: state => state.property1, someNumber: (state, props) => (props.index === 1) ? 1 : state.property3 });和OwnProps之间需要区别，因为前者会影响后者。根据组件从其父级收到的道具从Redux存储的不同部分选择数据是一种常见的模式。

更现实的例子：

DesiredSelection

重新选择createStructuredSelector如何在Typescript中工作？

1 个答案: