Как перевыбрать createStructuredSelector работает в Typescript? - PullRequest
Новая
       41

Как перевыбрать createStructuredSelector работает в Typescript?

0 голосов
/ 28 декабря 2018

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

1 Ответ

0 голосов
/ 28 декабря 2018

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]
});
...