Как работает reselect createStructuredSelector в Typescript?

Я пытаюсь понять, как метод повторного выбора 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? Спасибо!


react-native reactjs typescript redux reselect
person d0nutz1    schedule 28.12.2018    source источник

Ответы (1)


arrow_upward
14
arrow_downward

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 и DesiredSelection необходимо, потому что первое может влиять на второе. Распространенным шаблоном является выбор данных из разных частей вашего хранилища 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]
});
person Karol Majewski    schedule 28.12.2018