Как написать интерфейс TypeScript для объектов Immutable.js? - PullRequest
Новая
       8

Как написать интерфейс TypeScript для объектов Immutable.js?

0 голосов
/ 28 мая 2018

Допустим, у нас есть следующий интерфейс User: 

interface User {
  id: number;
  name: string;
  bag: Item[];
}

Теперь я могу определить компонент React: 

interface UserComponentProps {
  user: User;
}
interface UserComponentState {}

class UserComponent extends React.Component<UserComponentProps, UserComponentState> {

Это здорово, так как теперь я могу иметь проверку типоввнутри компонента, но есть проблема: пользователь не является неизменяемым, поэтому трудно предотвратить отображение компонента UserComponent, когда пользователь не изменился.

Но если я сохраню своих пользователей как неизменяемые объекты, мой компонент будет выглядетькак это: 

interface UserComponentProps {
  user: Immutable.Map<string, any>;
}
interface UserComponentState {}

class UserComponent extends React.Component<UserComponentProps, UserComponentState> {

Как определить интерфейс для объектов такого типа?

1 Ответ

0 голосов
/ 29 мая 2018

Компонент React будет перерисован, если props изменился, поэтому ответ во многом зависит от того, как вы создаете props для рендеринга.

Один простой пример даст вам идею: 

const bag = Immutable.List([{name:"bagItem1"}]);
console.log(bag.toJS() === bag.toJS())
<script src="https://facebook.github.io/immutable-js/immutable.js"></script>

Что это значит?Это означает, что если вы сохраните ваш Item[] с помощью Immutable, а затем отобразите UserComponent как: 

<UserComponent
   id={1}
   name={"some name"}
   bag={store.getIn(["bag", "items"]).toJS()}
   />

Затем при каждой мутации магазина, даже если сумка никогда не менялась, UserComponent получит новый объект для bag и принудительно выполнит повторную визуализацию.

Для plain объектов с возражениями, вы можете использовать React.PureComponent, что сделает поверхностное сравнение для вас, но если вам нужно передать массив объектов, у вас обычно есть два решения:

  1. реализует shallComponentUpdate метод для вас Component, где вы можете сравнить prevProps с nextProps вручную и вернуть boolean, который указывает, будет ли Component повторно обработан

  2. Не используйте Immutable для вашего магазина.Целиком!Моя компания сделала это, и мы никогда не сожалеем.(Вы также экономите 150 КБ :))

Чтобы заменить Immutable, вам нужно будет правильно изучить методы структурирования и мутирования хранилища.Есть много хороших статей

...