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

【问题标题】：How does reselect createStructuredSelector work in Typescript?重新选择 createStructuredSelector 如何在 Typescript 中工作？
【发布时间】：2019-05-26 13:56:37
【问题描述】：

我试图了解重新选择方法 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 store state，SomeOwnProps是父组件传入的props，SomeProps是这个组件使用的所有props。但是SomeOwnProps 和SomeProps 有什么区别，为什么两者都需要？为什么不能只使用SomeProps，因为它还包含SomeOwnProps 中定义的属性？谢谢！

【问题讨论】：

标签： reactjs typescript react-native redux reselect

【解决方案1】：

createStructuredSelector 有两种变体——一种使用你的组件自己的 props，第二种没有。如果您想要的选择不依赖于道具，那么使用后者会更容易。

考虑这个稍微做作的例子：

/**
 * 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 和DesiredSelection，因为前者可以影响后者。根据组件从其父组件收到的 props 从 Redux 存储的不同部分选择数据是一种常见模式。

比较现实的例子：

interface State {
  translations: {
    au: 'Hello, mate!',
    uk: 'Welcome, old chap!'
  }
}

interface OwnProps {
  country: 'au' | 'uk';
}

interface ConnectedProps {
  message: string
};

/**
 * These are all props your component will receive.
 */
type Props = OwnProps & ConnectedProps;

const getMessage = createStructuredSelector<State, OwnProps, ConnectedProps>({
  message: (state, props) => state.translations[props.country]
});

【讨论】：